#keyboardApp { --keyboard-accent:var(--accent-hover); --keyboard-focus:var(--accent); --keyboard-soft:var(--accent-soft); --keyboard-active-ink:var(--accent-readable); --keyboard-hover:#e1f2ff; --keyboard-border:#d9e3ee; --keyboard-tray:#edf2f8; --keyboard-key-edge:#c7d4e3; --keyboard-key-base:#b7c6d8; --keyboard-toolbar:#f7f9fc; --keyboard-modifier:#e0e9f3; width:100%; margin:0; border-color:var(--line); border-radius:16px; padding:16px; box-shadow:0 10px 28px #2532460d; }
#keyboardApp .keyboard-action-primary:hover { border-color:#0969ba; background:#0969ba; }
#keyboardApp .keyboard-workbench { border-radius:12px; }
#keyboardApp .keyboard-editor-tools { padding:8px 10px; }
#keyboardApp .keyboard-text-area { height:245px; min-height:max(185px,var(--keyboard-text-height,0px)); }
#keyboardApp #preview { padding:14px 16px; font-size:20px; }
#keyboardApp #preview::placeholder { font-size:18px; }
#keyboardApp .keyboard-action { min-height:36px; border-radius:8px; }
#keyboardApp .keyboard-editor-buttons .keyboard-action { width:36px; height:36px; }
#keyboardApp .keyboard-format-bar .keyboard-style-trigger { width:36px; height:36px; }
#keyboardApp .keyboard-board { max-width:none; }
#keyboardApp .keyboard-footer { padding-top:14px; justify-content:flex-end; }
#keyboardApp .keyboard-search { gap:8px; }
#keyboardApp .keyboard-method-bar { display:none; }
.arabic-mode-tabs { display:flex; gap:5px; padding:4px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:12px; background:var(--canvas); margin:0 auto; }
#keyboardApp .arabic-mode-tabs button { min-height:40px; border:1px solid transparent; padding:9px 20px; border-radius:9px; font-size:13px; font-weight:550; color:var(--keyboard-muted); }
#keyboardApp .arabic-mode-tabs button[aria-pressed="true"],#keyboardApp .arabic-mode-tabs button[aria-selected="true"] { border-color:color-mix(in srgb,var(--accent) 27%,var(--line)); background:var(--keyboard-paper); box-shadow:0 1px 4px #173b6610; color:var(--accent-readable); }
#keyboardApp .arabic-mode-tabs button:hover { color:var(--accent-readable); }
.arabic-mode-description { margin:10px 0 16px; text-align:center; font-size:11px; color:var(--keyboard-muted); min-height:16px; }
.arabic-smart-entry { padding:12px; border-top:1px solid var(--keyboard-border); background:var(--keyboard-soft); }
.arabic-smart-field { display:flex; align-items:center; gap:10px; }
.arabic-smart-field label { flex:none; font-size:12px; font-weight:600; }
#keyboardApp #smart-input { width:100%; min-width:0; height:40px; border:1px solid var(--keyboard-border); border-radius:8px; padding:7px 12px; font-size:16px; background:var(--keyboard-paper); color:var(--keyboard-ink); }
.arabic-smart-controls { display:flex; align-items:center; gap:6px; }
#keyboardApp #smart-convert,#keyboardApp #smart-options { min-height:40px; padding:7px 12px; white-space:nowrap; border:1px solid var(--keyboard-border); border-radius:8px; font-size:12px; background:var(--keyboard-paper); }
#keyboardApp #smart-convert { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
#smart-help,#smart-status { font-size:11px; line-height:1.5; color:var(--keyboard-muted); margin:7px 0 0; }
#keyboardApp .arabic-smart-picker { position:fixed; inset:auto; margin:0; padding:0; border:1px solid var(--keyboard-border); border-radius:12px; background:var(--keyboard-paper); color:var(--keyboard-ink); box-shadow:0 12px 35px #17365326; overflow:auto; min-width:0; box-sizing:border-box; }
.arabic-smart-picker>header,.arabic-smart-picker-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 12px; font-size:12px; border-bottom:1px solid var(--keyboard-border); }
#smart-picker-close { width:30px; height:30px; font-size:20px; border-radius:7px; }
#smart-picker-close:hover { background:var(--keyboard-soft); }
#smart-picker-list { display:flex; flex-wrap:wrap; gap:6px; padding:10px; }
#keyboardApp .arabic-smart-candidate { min-height:42px; padding:5px 12px; border:1px solid var(--keyboard-border); border-radius:8px; background:var(--keyboard-paper); color:var(--keyboard-ink); font:23px/1.4 Tahoma,Arial,sans-serif; }
#keyboardApp .arabic-smart-candidate:hover,#keyboardApp .arabic-smart-candidate:focus-visible,#keyboardApp .arabic-smart-candidate[aria-selected="true"] { background:var(--keyboard-soft); border-color:var(--accent); }
/* Match the shared keyboard's 680px deck; regular keys retain square faces.
   Modifier and Space keys fill the remaining row width as on a physical board. */
#keyboardApp .keyboard-board { max-width:var(--keyboard-board-width); }
@supports (container-type:inline-size) {
    #keyboardApp .keyboard-board { container-type:inline-size; --keyboard-key-size:calc((100cqw - 52px) / 14.7); }
    #keyboardApp .keyboard-key { min-height:0; height:var(--keyboard-key-size); }
    #keyboardApp .keyboard-key:not(.is-modifier):not(.key-space) { flex:0 0 var(--keyboard-key-size); aspect-ratio:1; padding:8px 2px 3px; }
    @media(max-width:760px) {
        #keyboardApp .keyboard-board { --keyboard-key-size:calc((100cqw - 39px) / 14.4); }
        #keyboardApp .keyboard-key:not(.is-modifier):not(.key-space) { padding:3px 0 0; font-size:clamp(10px,3.6cqw,19px); }
        #keyboardApp .keyboard-key.is-modifier { padding:0; font-size:clamp(6px,2.3cqw,8px); }
        #keyboardApp .keyboard-key .key-hint { font-size:5px; top:1px; left:2px; }
        #keyboardApp .keyboard-key.is-modifier .key-value::after { font-size:clamp(10px,4.5cqw,17px); }
    }
    @media(max-width:360px) {
        #keyboardApp .keyboard-key .key-hint { display:none; }
        #keyboardApp .keyboard-key:not(.is-modifier):not(.key-space) { padding:0; }
    }
}
/* The shared caret popup presents the character, typed sequence and shortcut. */
#keyboardApp .candidate-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; }
.candidate-heading>strong { grid-column:1; grid-row:1; font-size:12px; }
.candidate-heading>.candidate-help { grid-column:1; grid-row:2; min-width:0; color:var(--keyboard-muted); font-size:10px; line-height:1.4; }
#candidate-close { grid-column:2; grid-row:1 / span 2; width:30px; height:30px; padding:0; border-radius:7px; font-size:20px; }
#candidate-close:hover { background:var(--keyboard-soft); }
#candidate-list { display:flex; flex-wrap:wrap; gap:7px; padding:10px; }
#keyboardApp .candidate-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:58px; max-width:100%; min-height:60px; padding:7px 10px; }
.candidate-symbol { max-width:100%; overflow-wrap:anywhere; font:25px/1.25 Tahoma,Arial,sans-serif; }
.candidate-trigger,.candidate-shortcut { font-family:var(--font-body); font-size:9px; line-height:1.3; direction:ltr; white-space:nowrap; }
.candidate-trigger { color:var(--keyboard-ink); }
.candidate-shortcut { color:var(--keyboard-muted); }
#keyboardApp .candidate-option[aria-selected="true"] { background:var(--keyboard-soft); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
@media(max-width:360px) {
    #keyboardApp .candidate-option { min-width:50px; padding-inline:7px; }
}




/* Smart word choices stay compact; letter alternatives keep larger glyphs. */
#keyboardApp #candidate-popup .candidate-symbol { font-size:20px; line-height:1.3; }
#keyboardApp #candidate-popup[data-origin="word"] #candidate-list { gap:6px; padding:8px; }
#keyboardApp #candidate-popup[data-origin="word"] .candidate-option { flex-direction:column; gap:2px; min-width:0; min-height:40px; padding:4px 10px; }
#keyboardApp #candidate-popup[data-origin="word"] .candidate-symbol { font-family:"Noto Naskh Arabic",Tahoma,Arial,sans-serif; font-weight:500; font-size:14px; line-height:1.5; }
#keyboardApp #candidate-popup[data-origin="word"] .candidate-shortcut { font-size:9px; }
@media(max-width:680px) { #keyboardApp #candidate-popup[data-origin="word"] .candidate-option { min-height:44px; padding:5px 10px; } }

/* The original final harakat row shares the regular square key geometry. */
#keyboardApp .keyboard-row-diacritics { justify-content:center; margin-top:5px; padding-top:8px; border-top:1px solid var(--keyboard-border); }
#keyboardApp .keyboard-diacritic-key { aspect-ratio:1; flex:0 0 var(--keyboard-key-size,42px); height:var(--keyboard-key-size,42px); min-height:0; }
#keyboardApp .keyboard-diacritic-key .key-value { font-family:"Noto Naskh Arabic",Tahoma,Arial,sans-serif; font-size:1.15em; line-height:1; }
#keyboardApp .keyboard-diacritic-key .key-hint { max-width:calc(100% - 4px); overflow:hidden; font-size:7px; }
@media(max-width:760px) { #keyboardApp .keyboard-row-diacritics { padding-top:6px; margin-top:3px; } #keyboardApp .keyboard-diacritic-key .key-hint { display:none; } }

/* Arabic key letters use the same Naskh face as word suggestions. */
#keyboardApp:is([data-typing-mode="smart"],[data-typing-mode="simple"]) .keyboard-key:not(.is-modifier):not(.key-space) .key-value { font-family:"Noto Naskh Arabic",Tahoma,Arial,sans-serif; font-weight:500; }

/* Lift the Smart key glyphs optically without moving the key or its hint. */
#keyboardApp[data-typing-mode="smart"] .keyboard-key:not(.is-modifier):not(.key-space):not(.keyboard-diacritic-key) .key-value { transform:translateY(-.1em); }
@media(max-width:680px) { #keyboardApp[data-typing-mode="smart"] .keyboard-key:not(.is-modifier):not(.key-space):not(.keyboard-diacritic-key) .key-value { transform:translateY(-3px); } }

/* i2Arabic coral skin: keyboard styles do not change the site shell. */
@font-face { font-family:"Noto Naskh Arabic"; font-style:normal; font-weight:400 700; font-display:swap; src:url("./fonts-noto-naskh-arabic-noto-naskh-arabic-variable.ef21779f7145.woff2") format("woff2"); }
#keyboardApp { --accent:#ff7567; --accent-hover:#b83f34; --accent-readable:#a5332a; --accent-soft:#fff0ed; --keyboard-accent:#b83f34; --keyboard-focus:#c74739; --keyboard-soft:#fff0ed; --keyboard-active-ink:#a5332a; --keyboard-hover:#ffe2dc; --keyboard-border:#e9ddd9; --keyboard-tray:#f5efec; --keyboard-key-edge:#d8cbc5; --keyboard-key-base:#c4b5ae; --keyboard-toolbar:#faf6f3; --keyboard-modifier:#e9dfda; --keyboard-board-width:740px; width:100%; margin:0; padding:20px; border-radius:22px; box-shadow:0 12px 36px #563b2b08; }
#keyboardApp *,#keyboardApp *::before,#keyboardApp *::after { box-sizing:border-box; }
#keyboardApp button { cursor:pointer; }
#keyboardApp [hidden] { display:none!important; }
#keyboardApp button:disabled { cursor:default; }
#keyboardApp .keyboard-action-primary { background:#b83f34; border-color:#b83f34; color:#fff; }
#keyboardApp .keyboard-action-primary:hover { background:#9b2e26; border-color:#9b2e26; }
#keyboardApp .keyboard-text-area { height:240px; }
#keyboardApp .arabic-mode-tabs { margin:0 auto; background:#faf6f3; border-color:#eadfd9; }
#keyboardApp .arabic-mode-tabs button { display:flex; align-items:center; justify-content:center; }
#keyboardApp .arabic-mode-description { font-size:11px; line-height:1.9; }
#keyboardApp .keyboard-search { flex-wrap:wrap; }
#keyboardApp .keyboard-search label { font-size:11px; }
#keyboardApp .keyboard-style-dialog { max-width:min(420px,calc(100vw - 32px)); }
#keyboardApp .keyboard-board { max-width:var(--keyboard-board-width); }
:root[data-appearance="dark"] #keyboardApp { --keyboard-accent:#ff9b90; --keyboard-ink:#f6eeea; --keyboard-muted:#c6b7b0; --keyboard-paper:#242323; --keyboard-border:#554641; --keyboard-tray:#211e1d; --keyboard-toolbar:#2c2624; --keyboard-key:#39302c; --keyboard-key-edge:#635049; --keyboard-key-base:#191615; --keyboard-modifier:#483a34; --keyboard-soft:#422a25; --keyboard-hover:#58332c; --keyboard-active-ink:#ffb1a7; --keyboard-focus:#ff9b90; --accent-readable:#ffb1a7; --accent-soft:#422a25; }
:root[data-appearance="dark"] #keyboardApp .arabic-mode-tabs { background:#211e1d; border-color:#554641; }
:root[data-appearance="dark"] #keyboardApp .keyboard-action-primary { background:#ff9b90; border-color:#ff9b90; color:#351a16; }
@media(max-width:680px) { #keyboardApp { padding:10px; border-radius:16px; } #keyboardApp .arabic-mode-tabs { width:100%; gap:3px; } #keyboardApp .arabic-mode-tabs button { flex:1; min-width:0; padding:9px 5px; font-size:11px; } #keyboardApp .arabic-mode-description { font-size:10px; margin:10px 2px 14px; } #keyboardApp .keyboard-text-area { height:225px; } #keyboardApp .keyboard-footer { justify-content:center; padding-top:14px; } #keyboardApp .keyboard-search { justify-content:center; } }