# Microsoft Copilot (iOS) — Jetpack Compose Implementation Guide

Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file ports Copilot's visual language to **Android with Jetpack Compose (Material 3)**: a color token object, the flourish gradient, an acrylic surface, a `Typography` set, paste-ready `@Composable`s, `Modifier`s, motion, and haptics.

> Why a Compose guide for an iOS-referenced app? The DESIGN.md tokens are platform-neutral. This file keeps the *visual* identity (Copilot's warm Fluent workspace, acrylic surfaces, flourish + Fluent Blue duality, answer cards, tone selector, drawer-only nav) while making everything idiomatic Android — `ModalNavigationDrawer` instead of a UISplitView, a `RenderEffect` blur (API 31+) for acrylic, `sp`/`dp` instead of `pt`.

Assumes Compose BOM `2024.09+`, Kotlin `2.0+`, `minSdk 24` (acrylic blur is best on API 31+; graceful tinted fallback below), Material 3.

## 1. Color Tokens

```kotlin
// ui/theme/CopilotColors.kt
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color

object CopilotColors {
    // Light
    val Canvas  = Color(0xFFFFFFFF)
    val Surface = Color(0xFFF3F3F3)
    val Divider = Color(0xFFE0E0E0)
    val TextPrimary   = Color(0xFF242424)
    val TextSecondary = Color(0xFF616161)
    val TextTertiary  = Color(0xFF919191)

    // Dark
    val DarkCanvas  = Color(0xFF202020)
    val DarkSurface = Color(0xFF2D2D2D)
    val DarkDivider = Color(0xFF3A3A3A)
    val DarkTextPrimary   = Color(0xFFFFFFFF)
    val DarkTextSecondary = Color(0xFFA6A6A6)

    // Brand
    val Blue        = Color(0xFF0078D4)
    val BluePressed = Color(0xFF005A9E)
    val BlueTint    = Color(0xFFDEECF9)
    val DarkBlue    = Color(0xFF4DA3E0)
    val Coral       = Color(0xFFFF6F61)
    val Gold        = Color(0xFFFFB900)

    // Semantic
    val Success = Color(0xFF107C10)
    val Warning = Color(0xFFF7630C)
    val Error   = Color(0xFFC50F1F)
}

// The single warm brand gesture — flourish mark, streaming edge, focus emphasis.
fun copilotFlourish() = Brush.linearGradient(listOf(CopilotColors.Coral, CopilotColors.Gold))
```

Wire it into Material 3 light + dark schemes. `primary` is solid Fluent Blue (the flourish gradient is structural, never a component fill).

```kotlin
// ui/theme/Theme.kt
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.foundation.isSystemInDarkTheme

private val CopilotLight = lightColorScheme(
    primary        = CopilotColors.Blue,
    onPrimary      = Color.White,
    background     = CopilotColors.Canvas,
    onBackground   = CopilotColors.TextPrimary,
    surface        = CopilotColors.Canvas,
    onSurface      = CopilotColors.TextPrimary,
    surfaceVariant = CopilotColors.Surface,
    outline        = CopilotColors.Divider,
    error          = CopilotColors.Error,
)

private val CopilotDark = darkColorScheme(
    primary        = CopilotColors.DarkBlue,
    onPrimary      = Color(0xFF202020),
    background     = CopilotColors.DarkCanvas,
    onBackground   = CopilotColors.DarkTextPrimary,
    surface        = CopilotColors.DarkCanvas,
    onSurface      = CopilotColors.DarkTextPrimary,
    surfaceVariant = CopilotColors.DarkSurface,
    outline        = CopilotColors.DarkDivider,
    error          = CopilotColors.Error,
)

@Composable
fun CopilotTheme(
    dark: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) = MaterialTheme(
    colorScheme = if (dark) CopilotDark else CopilotLight,
    typography  = CopilotTypography,
    content     = content,
)
```

## 2. Typography

Segoe UI is Microsoft's product typeface. The closest free substitute is **Inter** — drop the TTFs in `res/font/` (lowercase, snake_case) and build a `FontFamily`. Use Cascadia Code for code. Fall back to the system grotesque (Roboto) if Inter is unavailable.

```kotlin
// ui/theme/CopilotType.kt
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

val SegoeUI = FontFamily(
    Font(R.font.segoe_ui_regular,  FontWeight.Normal),   // 400
    Font(R.font.segoe_ui_semibold, FontWeight.SemiBold), // 600
    Font(R.font.segoe_ui_bold,     FontWeight.Bold),     // 700
)
val CascadiaCode = FontFamily(Font(R.font.cascadia_code_regular, FontWeight.Normal))

// Named ramp — mirrors DESIGN.md §3 exactly (pt → sp 1:1)
object CopilotText {
    val Greeting    = TextStyle(SegoeUI, fontWeight = FontWeight.Bold,     fontSize = 28.sp, lineHeight = 34.sp, letterSpacing = (-0.2).sp)
    val Title       = TextStyle(SegoeUI, fontWeight = FontWeight.Bold,     fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = (-0.1).sp)
    val Section     = TextStyle(SegoeUI, fontWeight = FontWeight.SemiBold, fontSize = 18.sp, lineHeight = 23.sp)
    val AnswerH2    = TextStyle(SegoeUI, fontWeight = FontWeight.SemiBold, fontSize = 20.sp, lineHeight = 26.sp)
    val AnswerH3    = TextStyle(SegoeUI, fontWeight = FontWeight.SemiBold, fontSize = 17.sp, lineHeight = 23.sp)
    val AnswerBody  = TextStyle(SegoeUI, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 24.sp) // ≈ 1.5
    val UserTurn    = TextStyle(SegoeUI, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 23.sp)
    val PromptInput = TextStyle(SegoeUI, fontWeight = FontWeight.Normal,   fontSize = 16.sp, lineHeight = 22.sp)
    val Chip        = TextStyle(SegoeUI, fontWeight = FontWeight.SemiBold, fontSize = 14.sp, lineHeight = 18.sp)
    val Tone        = TextStyle(SegoeUI, fontWeight = FontWeight.SemiBold, fontSize = 13.sp, lineHeight = 16.sp, letterSpacing = 0.1.sp)
    val Meta        = TextStyle(SegoeUI, fontWeight = FontWeight.Normal,   fontSize = 13.sp, lineHeight = 17.sp)
    val Code        = TextStyle(CascadiaCode, fontWeight = FontWeight.Normal, fontSize = 14.sp, lineHeight = 21.sp)
    val LabelUpper  = TextStyle(SegoeUI, fontWeight = FontWeight.SemiBold, fontSize = 11.sp, lineHeight = 13.sp, letterSpacing = 0.6.sp)
    val Button      = TextStyle(SegoeUI, fontWeight = FontWeight.SemiBold, fontSize = 15.sp, lineHeight = 19.sp)
}

// Map onto Material 3 slots so stock components inherit the brand
val CopilotTypography = Typography(
    headlineLarge = CopilotText.Greeting,
    headlineSmall = CopilotText.Title,
    titleMedium   = CopilotText.Section,
    bodyMedium    = CopilotText.AnswerBody,
    labelSmall    = CopilotText.Meta,
)
```

## 3. Signature Components

### Acrylic Surface Modifier

```kotlin
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

// Fluent acrylic ≈ a tinted translucent fill + hairline + a blur-in on appear.
// True backdrop blur needs Modifier.graphicsLayer { renderEffect = ... } (API 31+);
// the tint + hairline below reads as acrylic on all supported APIs.
fun Modifier.copilotAcrylic(
    cornerRadius: Dp = 16.dp,
    dark: Boolean = false,
): Modifier = this
    .clip(RoundedCornerShape(cornerRadius))
    .background((if (dark) CopilotColors.DarkSurface else CopilotColors.Surface).copy(alpha = 0.85f))
    .border(
        1.dp,
        (if (dark) CopilotColors.DarkDivider else CopilotColors.Divider).copy(alpha = 0.6f),
        RoundedCornerShape(cornerRadius),
    )

@Composable
fun AcrylicAppear(content: @Composable (Modifier) -> Unit) {
    var shown by remember { mutableStateOf(false) }
    LaunchedEffect(Unit) { shown = true }
    val a by animateFloatAsState(if (shown) 1f else 0f, tween(220), label = "acrylicIn")
    val b by animateFloatAsState(if (shown) 0f else 8f, tween(220), label = "acrylicBlur")
    content(Modifier.alpha(a).blur(b.dp))
}
```

### Flourish Mark

```kotlin
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Path

@Composable
fun CopilotFlourish(size: Dp = 22.dp, modifier: Modifier = Modifier) {
    Canvas(modifier.size(size)) {
        val w = this.size.width; val h = this.size.height
        // Stylized swirl/flourish — a ribbon arc with a tail
        val p = Path().apply {
            moveTo(w * 0.15f, h * 0.7f)
            cubicTo(w * 0.0f, h * 0.35f, w * 0.4f, h * 0.05f, w * 0.7f, h * 0.25f)
            cubicTo(w * 1.0f, h * 0.45f, w * 0.7f, h * 0.95f, w * 0.4f, h * 0.8f)
            cubicTo(w * 0.25f, h * 0.72f, w * 0.5f, h * 0.5f, w * 0.65f, h * 0.55f)
        }
        drawPath(
            p,
            brush = copilotFlourish(),
            style = androidx.compose.ui.graphics.drawscope.Stroke(width = size.toPx() * 0.16f),
        )
    }
}
```

### Answer Card

```kotlin
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.material.icons.outlined.ContentCopy
import androidx.compose.material.icons.outlined.ThumbDownOffAlt
import androidx.compose.material.icons.outlined.ThumbUpOffAlt
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.draw.shadow

@Composable
fun CopilotAnswerCard(
    text: String,
    streaming: Boolean,
    dark: Boolean = false,
    modifier: Modifier = Modifier,
) {
    AcrylicAppear { appearMod ->
        Column(
            modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp)
                .then(appearMod)
                .shadow(10.dp, RoundedCornerShape(16.dp), spotColor = CopilotColors.TextPrimary.copy(alpha = 0.06f))
                .copilotAcrylic(16.dp, dark)
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            Row(horizontalArrangement = Arrangement.spacedBy(10.dp)) {
                CopilotFlourish(22.dp)
                Text(text, style = CopilotText.AnswerBody,
                    color = MaterialTheme.colorScheme.onBackground, modifier = Modifier.weight(1f))
            }
            if (!streaming) {
                Row(
                    Modifier.padding(start = 32.dp),
                    horizontalArrangement = Arrangement.spacedBy(20.dp),
                ) {
                    listOf(
                        Icons.Outlined.ContentCopy to "Copy",
                        Icons.Outlined.ThumbUpOffAlt to "Like",
                        Icons.Outlined.ThumbDownOffAlt to "Dislike",
                        Icons.Filled.Refresh to "Regenerate",
                        Icons.Filled.IosShare to "Share",
                        Icons.Filled.MoreHoriz to "More",
                    ).forEach { (icon, cd) ->
                        Icon(icon, cd, tint = MaterialTheme.colorScheme.onSurfaceVariant,
                            modifier = Modifier.size(18.dp))
                    }
                }
            }
        }
    }
}
```

### User Turn

```kotlin
@Composable
fun CopilotUserTurn(
    text: String,
    neutral: Boolean = false,
    modifier: Modifier = Modifier,
) {
    Row(
        modifier.fillMaxWidth().padding(horizontal = 16.dp),
        horizontalArrangement = Arrangement.End,
    ) {
        Text(
            text,
            style = CopilotText.UserTurn,
            color = if (neutral) MaterialTheme.colorScheme.onBackground else Color.White,
            modifier = Modifier
                .widthIn(max = 320.dp)
                .clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp,
                    bottomStart = 16.dp, bottomEnd = 4.dp))
                .background(if (neutral) MaterialTheme.colorScheme.surfaceVariant else CopilotColors.Blue)
                .padding(horizontal = 16.dp, vertical = 12.dp),
        )
    }
}
```

### Tone Selector

```kotlin
import androidx.compose.foundation.clickable
import androidx.compose.foundation.shape.CircleShape

@Composable
fun CopilotToneSelector(
    selection: Int,
    onSelect: (Int) -> Unit,
    modifier: Modifier = Modifier,
) {
    val tones = listOf("Creative", "Balanced", "Precise")
    Row(
        modifier
            .clip(CircleShape)
            .background(MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.85f))
            .border(1.dp, MaterialTheme.colorScheme.outline.copy(alpha = 0.6f), CircleShape)
            .padding(3.dp),
    ) {
        tones.forEachIndexed { i, t ->
            val sel = selection == i
            Box(
                Modifier
                    .weight(1f)
                    .clip(CircleShape)
                    .background(if (sel) CopilotColors.Blue else Color.Transparent)
                    .clickable { onSelect(i) }
                    .padding(vertical = 9.dp),
                contentAlignment = Alignment.Center,
            ) {
                Text(t, style = CopilotText.Tone,
                    color = if (sel) Color.White else MaterialTheme.colorScheme.onSurfaceVariant)
            }
        }
    }
}
```

### Prompt Bar (acrylic, focus accent)

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ArrowUpward
import androidx.compose.material.icons.filled.Mic
import androidx.compose.material.icons.filled.Stop
import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback

@Composable
fun CopilotPromptBar(
    value: String,
    onValueChange: (String) -> Unit,
    onSend: () -> Unit,
    onStop: () -> Unit,
    streaming: Boolean = false,
    dark: Boolean = false,
    modifier: Modifier = Modifier,
) {
    val interaction = remember { MutableInteractionSource() }
    val focused by interaction.collectIsFocusedAsState()
    val active = value.isNotEmpty()
    val haptics = LocalHapticFeedback.current

    Row(
        modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
            .clip(RoundedCornerShape(24.dp))
            .background((if (dark) CopilotColors.DarkSurface else CopilotColors.Surface).copy(alpha = 0.85f))
            .border(
                if (focused) 1.5.dp else 1.dp,
                if (focused) CopilotColors.Blue
                else MaterialTheme.colorScheme.outline.copy(alpha = 0.6f),
                RoundedCornerShape(24.dp),
            )
            .padding(horizontal = 14.dp, vertical = 8.dp)
            .heightIn(min = 52.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(10.dp),
    ) {
        Icon(Icons.Filled.Add, "Add content",
            tint = MaterialTheme.colorScheme.onSurfaceVariant, modifier = Modifier.size(22.dp))
        BasicTextField(
            value = value, onValueChange = onValueChange,
            interactionSource = interaction,
            textStyle = CopilotText.PromptInput.copy(color = MaterialTheme.colorScheme.onBackground),
            modifier = Modifier.weight(1f),
            decorationBox = { inner ->
                if (value.isEmpty()) Text("Message Copilot", style = CopilotText.PromptInput,
                    color = MaterialTheme.colorScheme.onSurfaceVariant)
                inner()
            },
        )
        Icon(Icons.Filled.Mic, "Voice",
            tint = MaterialTheme.colorScheme.onSurfaceVariant, modifier = Modifier.size(22.dp))
        Box(
            Modifier
                .size(36.dp).clip(CircleShape)
                .background(if (streaming || active) CopilotColors.Blue else Color.Transparent)
                .clickable {
                    if (streaming) onStop()
                    else if (active) { haptics.performHapticFeedback(HapticFeedbackType.LongPress); onSend() }
                },
            contentAlignment = Alignment.Center,
        ) {
            Icon(
                if (streaming) Icons.Filled.Stop else Icons.Filled.ArrowUpward,
                if (streaming) "Stop generating" else "Send",
                tint = if (streaming || active) Color.White else MaterialTheme.colorScheme.onSurfaceVariant,
                modifier = Modifier.size(if (streaming) 16.dp else 18.dp),
            )
        }
    }
}
```

### Suggestion Chip

```kotlin
@Composable
fun CopilotSuggestionChip(
    label: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    featured: Boolean = false,
    dark: Boolean = false,
) {
    Row(
        modifier
            .copilotAcrylic(18.dp, dark)
            .clickable(onClick = onClick)
            .padding(horizontal = 16.dp, vertical = 10.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(6.dp),
    ) {
        if (featured) CopilotFlourish(12.dp)
        Text(label, style = CopilotText.Chip, color = MaterialTheme.colorScheme.onBackground)
    }
}
```

### Streaming Shimmer + Thinking

```kotlin
import androidx.compose.animation.core.*
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.BlendMode

@Composable
fun CopilotStreamingText(text: String, modifier: Modifier = Modifier) {
    val t = rememberInfiniteTransition(label = "stream")
    val x by t.animateFloat(-120f, 1000f,
        infiniteRepeatable(tween(1100, easing = LinearEasing)), label = "sweep")
    Text(
        text, style = CopilotText.AnswerBody, color = MaterialTheme.colorScheme.onBackground,
        modifier = modifier.drawWithContent {
            drawContent()
            drawRect(
                brush = Brush.horizontalGradient(
                    0f to Color.Transparent,
                    0.45f to CopilotColors.Gold.copy(alpha = 0.28f),
                    0.6f to CopilotColors.Coral.copy(alpha = 0.20f),
                    1f to Color.Transparent,
                    startX = x, endX = x + 120f,
                ),
                blendMode = BlendMode.Plus,
            )
        },
    )
}

@Composable
fun CopilotThinking() {
    val t = rememberInfiniteTransition(label = "thinking")
    Row(horizontalArrangement = Arrangement.spacedBy(6.dp)) {
        repeat(3) { i ->
            val s by t.animateFloat(0.5f, 1f,
                infiniteRepeatable(tween(500), RepeatMode.Reverse, StartOffset(i * 150)), label = "dot$i")
            Box(Modifier.size(7.dp).scale(s).clip(CircleShape).background(copilotFlourish()))
        }
    }
}
```

## 4. Navigation (no bottom bar — drawer + top bar)

Copilot has **no bottom navigation**. Use Material 3 `ModalNavigationDrawer` as the sole primary nav, with a `CenterAlignedTopAppBar`.

```kotlin
import androidx.compose.material3.*
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CopilotScaffold() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerState = drawerState,
        scrimColor = Color.Black.copy(alpha = 0.40f),
        drawerContent = {
            ModalDrawerSheet(
                drawerContainerColor = MaterialTheme.colorScheme.background,
                modifier = Modifier.fillMaxWidth(0.80f),
            ) {
                Column(Modifier.fillMaxSize().padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
                    Row(
                        Modifier.clip(RoundedCornerShape(8.dp)).background(CopilotColors.Blue)
                            .clickable { }.padding(horizontal = 16.dp, vertical = 12.dp),
                        verticalAlignment = Alignment.CenterVertically,
                        horizontalArrangement = Arrangement.spacedBy(8.dp),
                    ) {
                        Icon(Icons.Filled.Add, null, tint = Color.White, modifier = Modifier.size(20.dp))
                        Text("New chat", style = CopilotText.Button, color = Color.White)
                    }
                    Text("TODAY", style = CopilotText.LabelUpper,
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                        modifier = Modifier.padding(top = 16.dp, start = 4.dp))
                    // recents rows: 48.dp; active row gets acrylic highlight + 3.dp leading Blue bar
                }
            }
        },
    ) {
        Scaffold(
            topBar = {
                CenterAlignedTopAppBar(
                    title = { Text("Copilot", style = CopilotText.Button) },
                    navigationIcon = {
                        IconButton(onClick = { scope.launch { drawerState.open() } }) {
                            Icon(Icons.Filled.Menu, "Open sidebar")
                        }
                    },
                    actions = {
                        Icon(Icons.Filled.AccountCircle, "Account",
                            Modifier.size(28.dp).padding(end = 8.dp))
                    },
                    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                        containerColor = MaterialTheme.colorScheme.background),
                )
            },
            bottomBar = { /* CopilotPromptBar — NOT a NavigationBar */ },
        ) { pad -> ConversationList(Modifier.padding(pad)) }
    }
}
```

## 5. Code Block (inside an answer card)

```kotlin
@Composable
fun CopilotCodeBlock(language: String, code: String, dark: Boolean = false) {
    Column(
        Modifier.fillMaxWidth()
            .clip(RoundedCornerShape(12.dp))
            .background(if (dark) Color(0xFF1B1B1B) else Color(0xFFEDEDED))
            .border(1.dp, MaterialTheme.colorScheme.outline.copy(alpha = 0.6f), RoundedCornerShape(12.dp)),
    ) {
        Row(
            Modifier.fillMaxWidth().padding(horizontal = 12.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
        ) {
            Text(language, style = CopilotText.Meta, color = MaterialTheme.colorScheme.onSurfaceVariant)
            Text("Copy", style = CopilotText.Button, color = CopilotColors.Blue)
        }
        Text(code, style = CopilotText.Code,
            modifier = Modifier.horizontalScroll(rememberScrollState()).padding(16.dp))
    }
}
```

## 6. Motion

| Moment | Compose recipe |
|--------|----------------|
| Acrylic blur-in | `AcrylicAppear` ramps `alpha` 0 → 1 and `blur` 8 → 0 dp over 220ms |
| Streaming sweep | `rememberInfiniteTransition` driving a horizontal flourish-gradient `drawWithContent` overlay (BlendMode.Plus) |
| Thinking dots | `rememberInfiniteTransition` 3 flourish dots scaling 0.5 → 1, `StartOffset(i*150)` |
| Send ⇄ Stop | swap the icon; `Crossfade` / `AnimatedContent` on the streaming flag |
| Tone pill | `animateColorAsState` on the selected segment background, ~200ms |
| Prompt focus accent | toggle border width/color; `animateDpAsState` over 180ms |
| Sidebar | `ModalNavigationDrawer` default slide + scrim fade |
| Copy confirm | `AnimatedVisibility(enter = slideInVertically + fadeIn)`, acrylic Snackbar, 1.5s |

Haptics: prefer `LocalHapticFeedback`. For richer control use `LocalView.current.performHapticFeedback(HapticFeedbackConstants.CONTEXT_CLICK)` (API 30+) or a `Vibrator` `VibrationEffect.createOneShot(10, ...)` to approximate iOS's `.soft` impact on send.

## 7. Icons

Closest first-party set is `androidx.compose.material:material-icons-extended`. The **flourish is custom** — draw the gradient swirl path (see `CopilotFlourish`) or load a vector drawable with a gradient `<aapt:attr>` fill.

| Purpose | SF Symbol (iOS) | Material Icon (Compose) |
|---------|-----------------|--------------------------|
| Flourish (brand) | `sparkles` (swirl substitute) | custom gradient `Canvas` path |
| Send | `arrow.up` | `Icons.Filled.ArrowUpward` |
| Stop streaming | `stop.fill` | `Icons.Filled.Stop` |
| Voice / Mic | `mic` | `Icons.Filled.Mic` |
| Add content | `plus` | `Icons.Filled.Add` |
| Copy | `doc.on.doc` | `Icons.Outlined.ContentCopy` |
| Like / Dislike | `hand.thumbsup` / `hand.thumbsdown` | `Icons.Outlined.ThumbUpOffAlt` / `ThumbDownOffAlt` |
| Regenerate | `arrow.clockwise` | `Icons.Filled.Refresh` |
| Share | `square.and.arrow.up` | `Icons.Filled.IosShare` |
| More | `ellipsis` | `Icons.Filled.MoreHoriz` |
| Sidebar toggle | `line.3.horizontal` | `Icons.Filled.Menu` |
| Selector chevron | `chevron.down` | `Icons.Filled.ExpandMore` |
| New chat | `square.and.pencil` | `Icons.Filled.Add` / `Icons.Outlined.Edit` |
| Search (sidebar) | `magnifyingglass` | `Icons.Filled.Search` |
| Conversation row | `bubble.left` | `Icons.Outlined.ChatBubbleOutline` |
| Account | `person.crop.circle` | `Icons.Filled.AccountCircle` |

## 8. Minimum SDK & Accessibility Notes

- **minSdk 24** (Compose floor is 21; modern motion comfortable at 24). True backdrop blur via `Modifier.graphicsLayer { renderEffect = RenderEffect.createBlurEffect(...) }` is **API 31+** — below that, the tinted translucent fill in `copilotAcrylic` is the graceful fallback. `compileSdk 34+`, Compose BOM `2024.09+`, Kotlin `2.0+`.
- **Edge-to-edge**: call `enableEdgeToEdge()` in the `Activity`; light mode uses dark system-bar icons (inverse in dark) via `WindowCompat`. Use `Scaffold` insets + `Modifier.imePadding()` so the prompt bar floats above the keyboard.
- **No bottom navigation**: do not add a `NavigationBar`. The `ModalNavigationDrawer` is the sole primary nav; the prompt bar lives in the `bottomBar` slot but is a composer, not nav.
- **Font scaling**: `sp` honors the user's font scale automatically — keep it on greeting, answers, body. Pin the prompt-bar base height, sidebar day labels, and tone labels via `dp` or a fixed `Density` override.
- **TalkBack**: mark `CopilotFlourish` with `Modifier.semantics { hideFromAccessibility() }` (decorative); the send button announces "Send" / "Stop generating"; expose the tone selector as a single `Modifier.semantics { role = Role.RadioButton }` group; announce stream completion via `LocalView.current.announceForAccessibility(...)`.
- **Reduce transparency / contrast**: respect the system high-contrast setting — when reduced transparency is requested, render `copilotAcrylic` with full-opacity surface so text contrast holds.
- **The flourish gradient is brand, not state**: never rely on it alone to signal focus/streaming — pair the focus accent with a TalkBack focus event and the stream with a live region.
- **Contrast**: `#616161` on `#FFFFFF` and `#A6A6A6` on `#202020` pass WCAG AA at 13sp+. Use `DarkBlue #4DA3E0` for links/send on the dark canvas.
- **Dynamic color**: do **not** enable Material You `dynamicLightColorScheme()` — Copilot's brand requires the fixed Fluent surfaces and the exact `#FF6F61 → #FFB900` flourish gradient regardless of wallpaper, identical across light and dark.