:root{font:16px system-ui,sans-serif;color:#27211e;background:#f3eee9}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center}.chat-card{width:min(680px,calc(100% - 24px));min-height:min(760px,calc(100vh - 24px));display:flex;flex-direction:column;padding:22px;background:#fffdfa;border:1px solid #e5d9ce;border-radius:16px;box-shadow:0 14px 40px #4b34251c}header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border-bottom:1px solid #eadfd5;padding-bottom:14px}.brand{color:#c64e31;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:12px}h1{font:600 28px Georgia,serif;margin:5px 0}h2{font-size:18px;margin:0 0 8px}.muted{color:#756b64;font-size:13px;margin:0}.back{font-size:12px;color:#9d3c25}.status{margin:14px 0 4px;color:#28734d;font-weight:600}.error{color:#a52f23;min-height:22px;margin:0}.hidden{display:none!important}.panel{border:1px solid #eadfd5;border-radius:12px;padding:16px;margin:12px 0;background:#fffaf6}.panel form{display:grid;gap:8px}.panel label{font-size:13px;color:#756b64}.panel input,.room-link input{padding:10px;border:1px solid #d8cec1;border-radius:8px;font:inherit}.panel button,.room-link button{border:0;border-radius:8px;padding:10px 13px;background:#d55d3b;color:#fff;font-weight:700;cursor:pointer}.panel-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}.panel-heading button{margin-left:5px;padding:7px 9px;font-size:12px}.secondary{background:#756b64!important}.identity-summary{font-size:13px;color:#756b64;margin:8px 0}.contact-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}.contact-list li{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:10px;background:#f6eee8;border-radius:9px}.contact-list small{color:#756b64;grid-column:1/-1}.room-link{grid-column:1/-1;display:flex;gap:6px}.room-link input{flex:1;min-width:0}.contact-card-name{font-size:20px;font-weight:700;margin:6px 0}.messages-panel{display:flex;flex-direction:column;min-height:300px;flex:1}.messages{flex:1;overflow:auto;padding:16px 4px;display:flex;flex-direction:column;gap:10px}.message{max-width:82%;padding:10px 12px;border-radius:12px;background:#f0e8e1;align-self:flex-start}.message.mine{align-self:flex-end;background:#f7d9cc}.message-body{white-space:pre-wrap;overflow-wrap:anywhere}.message-body a{color:#9d3c25;text-decoration:underline;overflow-wrap:anywhere}.message-meta{text-align:right;color:#756b64;font-size:11px;margin-top:4px}.composer{display:flex;gap:8px;border-top:1px solid #eadfd5;padding-top:14px}.composer input{min-width:0;flex:1;padding:12px;border:1px solid #d8cec1;border-radius:8px;font:inherit}.composer button{border:0;border-radius:8px;padding:0 18px;background:#d55d3b;color:#fff;font-weight:700}.composer button:disabled{opacity:.45}.privacy{font-size:11px;color:#756b64;margin:12px 0 0}.pending{color:#946d22}.delivered{color:#28734d}@media(max-width:520px){.chat-card{min-height:100vh;width:100%;border-radius:0}.back{font-size:11px}.message{max-width:90%}.panel-heading{align-items:flex-start;flex-direction:column}}
/* U0 mobile-first hierarchy */
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink,#171614);background:var(--paper,#f7f3ea)}
body{display:block;background:var(--paper,#f7f3ea)}
.chat-card{width:min(720px,100%);min-height:100vh;margin:0 auto;padding:18px;background:var(--paper,#f7f3ea);border:0;border-radius:0;box-shadow:none}
header{border-bottom:1px solid #d9cec1;padding-bottom:12px;align-items:center}.brand{color:#171614;text-transform:none;letter-spacing:0;font-size:1.85rem;line-height:1;font-weight:800}h1{font:600 1rem system-ui,sans-serif;margin:8px 0 0;color:#756b64}.icon-button{font-size:1.55rem;min-width:48px;min-height:48px;color:#171614}
.panel{border:0;border-radius:0;padding:10px 0;margin:12px 0;background:transparent}.section-heading,.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.section-heading h2,.panel-heading h2{font-size:1.25rem;margin:0}
.conversation-list{gap:2px}.conversation-list button,.conversation-row>button:first-child{border:0;border-bottom:1px solid #dfd5ca;border-radius:0;padding:14px 4px;background:transparent;min-height:68px}.conversation-list small{font-size:.95rem;color:#5f554e}.transport{display:none}.primary-plus{display:grid;place-items:center;margin:18px 0 0 auto;width:56px;height:56px;background:#1f5aa6;font-size:1.8rem}.add-actions button{min-height:48px}.contact-item{padding:5px 0;min-height:56px}.contact-avatar{width:42px;height:42px;background:#e8b44a;color:#171614}.contact-person{font-size:1.15rem;padding:10px 0}
.settings-group{border-top:1px solid #dfd5ca;padding:16px 0}.settings-group h3{margin:0 0 8px;font-size:1.05rem}.panel-close{border:0;background:transparent!important;color:#171614!important;font-size:1.8rem!important;padding:0 8px!important}.conversation-header .back{font-size:1.5rem;color:#171614;padding:8px}.conversation-header .conversation-title{font-size:1.35rem}.call-link{min-width:48px;min-height:48px;padding:8px;font-size:1.25rem;background:#c63d32}.person-menu summary{padding:8px;min-width:48px;text-align:center}.person-menu button{min-height:46px}
.status{min-height:24px;margin:8px 0;color:#2e6a50}.messages-panel{min-height:calc(100vh - 150px)}.messages{padding:12px 0 18px;gap:10px}.message{font-size:1.05rem;line-height:1.35}.message-meta{font-size:.8rem}.composer{position:sticky;bottom:0;padding:10px 0 0;background:var(--paper,#f7f3ea);align-items:center}.composer input{min-height:48px;background:#fff}.composer button{min-width:52px;min-height:48px;font-size:1rem}.composer #image-button{display:inline-grid;place-items:center;flex:none;padding:0;background:transparent;color:#171614;font-size:1.35rem}.call-panel{background:#fff;border-radius:12px;padding:14px}.call-controls button{min-height:48px}
@media(min-width:720px){.chat-card{padding-left:28px;padding-right:28px}}

/* U0.1: explicitly own list colours; do not inherit button/theme colours. */
.conversation-list button,
.conversation-row>button:first-child{color:#171614!important;-webkit-text-fill-color:#171614!important}
.conversation-list button>span:first-child,
.conversation-row>button:first-child>span:first-child{color:#171614!important;font-size:1.12rem;font-weight:750}
.conversation-list button small,
.conversation-row>button:first-child small{color:#4b413b!important;-webkit-text-fill-color:#4b413b!important;font-size:.95rem}
.conversation-list button:visited,
.conversation-row>button:first-child:visited{color:#171614!important}
.conversation-list .unread-badge,
.conversation-row .unread-badge{color:#fff!important;-webkit-text-fill-color:#fff!important}
.toast{position:fixed;left:50%;bottom:20px;z-index:20;transform:translateX(-50%);width:min(92vw,520px);padding:13px 16px;border-radius:10px;background:#171614;color:#fff;font-size:1rem;text-align:center;box-shadow:0 6px 20px #17161444}
.secondary-action{padding:10px 0;color:#171614}.secondary-action summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.secondary-action form{margin-top:8px}
.conversation-header{position:sticky;top:0;z-index:8;background:var(--paper,#f7f3ea);padding-top:4px}
.new-message-jump{align-self:center;border:0;border-radius:999px;padding:9px 14px;background:#1f5aa6;color:#fff;font:inherit;cursor:pointer;box-shadow:0 3px 10px #17161433}
.preferences-dialog{width:min(92vw,420px);border:0;border-radius:14px;padding:18px;background:#fffdfa;color:#171614;box-shadow:0 12px 40px #17161455}.preferences-dialog::backdrop{background:#17161466}.preferences-dialog form{display:grid;gap:16px}.preferences-dialog fieldset{border:0;border-top:1px solid #dfd5ca;padding:12px 0 0;margin:0}.preferences-dialog legend{font-weight:700;padding:0 6px 0 0}.preference-options{display:flex;gap:8px}.preference-options button{flex:1;min-height:48px;border:1px solid #b8aaa0;border-radius:8px;background:#fff;color:#171614;font:inherit;cursor:pointer}.preference-options button[aria-pressed="true"]{border-color:#1f5aa6;background:#e8f0fa;font-weight:700;box-shadow:inset 0 0 0 2px #1f5aa6}
[data-text-size="large"] .message{font-size:1.2rem;line-height:1.5}[data-text-size="large"] .conversation-list button>span:first-child{font-size:1.25rem!important}[data-text-size="large"] .contact-person{font-size:1.25rem}[data-text-size="large"] .composer input{font-size:1.15rem}[data-text-size="large"] .composer button{font-size:1.05rem}
[data-density="compact"] .conversation-list button,[data-density="compact"] .conversation-row>button:first-child{min-height:56px;padding-top:9px;padding-bottom:9px}[data-density="compact"] .messages{gap:5px;padding-top:8px;padding-bottom:10px}[data-density="compact"] .message{padding:7px 10px}[data-density="compact"] .contact-item{min-height:48px;padding-top:2px;padding-bottom:2px}
[data-whatsapp="disabled"] #save-whatsapp,[data-whatsapp="disabled"] #send-whatsapp,[data-whatsapp="disabled"] #remove-whatsapp{display:none!important}

/* V1: sistema visual base, sin cambiar la estructura funcional. */
:root{--paper:#f7f3ea;--surface:#fff;--surface-secondary:#f1e9df;--ink:#171614;--ink-secondary:#5f554e;--accent:#c63d32;--accent-blue:#1f5aa6;--mustard:#e8b44a;--success:#2e6a50;--error:#a52f23;--border:#d9cec1;--space-1:6px;--space-2:10px;--space-3:14px;--space-4:18px;--space-5:24px;--radius-sm:8px;--radius-md:12px;--text-body:18px;--text-name:1.2rem;--text-meta:15px;font-family:"Trebuchet MS",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
body{background:var(--paper);color:var(--ink)}
.chat-card{width:min(720px,100%);padding:var(--space-4) var(--space-5);background:var(--paper);color:var(--ink)}
header{border-bottom:1px solid var(--border);padding-bottom:var(--space-3)}
.brand{color:var(--ink);font-size:1.85rem;font-weight:800;letter-spacing:-.02em}
h1{font-size:1rem;font-weight:600;font-family:inherit;color:var(--ink-secondary);margin:var(--space-2) 0 0}h2{font-size:1.35rem;letter-spacing:-.01em}h3{font-size:1rem;color:var(--ink-secondary)}
.muted,.identity-summary{color:var(--ink-secondary)}
.icon-button{color:var(--ink);border-radius:var(--radius-sm)}.icon-button:hover,.icon-button:focus-visible{background:var(--surface-secondary);outline:2px solid var(--accent-blue);outline-offset:2px}
.panel{background:transparent;border:0;padding:var(--space-3) 0;margin:var(--space-3) 0}
.conversation-list button,.conversation-row>button:first-child{grid-template-columns:auto 1fr auto;align-items:center;column-gap:var(--space-3);border-bottom:1px solid var(--border);background:transparent;padding:var(--space-3) var(--space-1);min-height:72px;color:var(--ink)!important}
.conversation-list button>span:not(.avatar):not(.transport),.conversation-row>button:first-child>span:not(.avatar):not(.transport){grid-column:2;color:var(--ink)!important;font-size:var(--text-name);font-weight:750}.conversation-list button>.avatar,.conversation-row>button:first-child>.avatar{grid-column:1;grid-row:1/3;font-size:.9rem!important}
.conversation-list button>span:not(.avatar):not(.transport),.conversation-list small,.conversation-row>button:first-child>span:not(.avatar):not(.transport),.conversation-row>button:first-child small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-list small,.conversation-row>button:first-child small{grid-column:2;color:var(--ink-secondary)!important;font-size:var(--text-meta)}
.transport{grid-column:3;grid-row:1/3}.conversation-row>button:first-child .avatar{grid-row:1/3}
.contact-list{gap:var(--space-1)}.contact-item{min-height:64px;padding:var(--space-2) 0;border-bottom:1px solid var(--border)}.contact-person{font-size:var(--text-name);color:var(--ink);border-radius:var(--radius-sm)}.contact-person:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px}
.avatar{width:44px;height:44px;display:inline-grid;place-items:center;flex:none;border:2px solid var(--ink);color:var(--ink);font-weight:800;line-height:1;background:var(--mustard)}.avatar-circle{border-radius:50%}.avatar-rounded{border-radius:12px}.avatar-diamond{border-radius:8px;transform:rotate(45deg);width:38px;height:38px;margin:3px;font-size:.9rem}.avatar-hexagon{clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}.avatar-arch{border-radius:50% 50% 18% 18%}.avatar-square{border-radius:4px}.avatar.color-0{background:#f0b5a7}.avatar.color-1{background:#a9c7e8}.avatar.color-2{background:#e8b44a}.avatar.color-3{background:#abd0ba}
.conversation-header{background:var(--paper);border-bottom:1px solid var(--border);padding-bottom:var(--space-2)}.conversation-header .conversation-title{font-size:1.35rem;color:var(--ink)}.conversation-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status{color:var(--success);font-size:var(--text-meta)}.status.connected::before{content:"● 〰〰 ●  ";color:var(--success);letter-spacing:.08em}.error{color:var(--error)}
.message{font-size:var(--text-body);line-height:1.45;border-radius:var(--radius-md);padding:var(--space-3);background:var(--surface-secondary);color:var(--ink)}.message.mine{background:#f4d0c5}.message-meta{font-size:var(--text-meta);color:var(--ink-secondary)}
.composer{gap:var(--space-2);border-top:1px solid var(--border);padding-top:var(--space-3);background:var(--paper)}.composer input{min-height:50px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:var(--text-body);padding:var(--space-2) var(--space-3)}.composer button{min-height:50px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-size:1rem}.composer #image-button{color:var(--ink);background:transparent}
.panel button,.room-link button,.person-menu button{border-radius:var(--radius-sm);font-size:1rem}.panel button:not(.secondary),.room-link button:not(.secondary){background:var(--accent)}.secondary{background:var(--ink-secondary)!important}
.toast{background:var(--ink);color:#fff;border-radius:var(--radius-sm);font-size:1rem}.unread-badge{background:var(--accent-blue);font-size:.9rem;min-width:1.6em;height:1.6em}
.preferences-dialog{background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius-md)}
[data-text-size="large"] .message{font-size:1.25rem;line-height:1.52}[data-text-size="large"] .conversation-list button>span:not(.avatar):not(.transport),[data-text-size="large"] .conversation-row>button:first-child>span:not(.avatar):not(.transport){font-size:1.35rem!important}[data-text-size="large"] .contact-person{font-size:1.35rem}[data-text-size="large"] .composer input{font-size:1.25rem}[data-text-size="large"] .composer button{font-size:1.1rem}
[data-density="compact"] .conversation-list button,[data-density="compact"] .conversation-row>button:first-child{min-height:58px;padding-top:var(--space-2);padding-bottom:var(--space-2)}[data-density="compact"] .messages{gap:6px}[data-density="compact"] .message{padding:var(--space-2) var(--space-3)}[data-density="compact"] .contact-item{min-height:52px;padding-top:var(--space-1);padding-bottom:var(--space-1)}
@media(max-width:520px){.chat-card{padding-left:var(--space-4);padding-right:var(--space-4)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important;animation-iteration-count:1!important}}

/* H3-A: los campos de Dígame son texto occidental; evitar herencias bidi
   del WebView y conservar el orden/cursor que entrega el IME. */
input,textarea,select{direction:ltr;unicode-bidi:plaintext;writing-mode:horizontal-tb;text-transform:none;text-align:start}

/* Capacitor/WebView: el teclado puede reducir visualViewport aunque no
   cambie 100vh. Usamos la altura observada y dejamos espacio para focus. */
html{scroll-padding-bottom:calc(24px + env(safe-area-inset-bottom))}
body{min-height:var(--digame-viewport-height,100dvh)}
.chat-card{min-height:var(--digame-viewport-height,100dvh)}
#identity-panel,#add-panel,.panel form{scroll-margin-top:24px;scroll-margin-bottom:calc(24px + env(safe-area-inset-bottom))}
.top-actions[hidden]{display:none!important}
.welcome-panel{width:min(100%,460px);align-self:center;margin:clamp(12px,4vw,32px) auto 0}
.welcome-panel h1{margin:0;font-size:clamp(1.5rem,4.8vw,2rem);line-height:1.15}
.welcome-panel>p{margin:10px 0 24px;line-height:1.5}
#identity-form{display:grid;gap:8px}
#identity-form label{color:var(--ink);font-size:1rem;font-weight:650}
#identity-form input,#identity-form button,.welcome-recovery button{min-height:48px}
#identity-name-help{margin:0 0 4px;line-height:1.45}
.welcome-recovery{margin-top:24px;padding-top:8px;border-top:1px solid var(--border)}
.welcome-recovery summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:650}
.welcome-recovery p{margin:4px 0 12px;line-height:1.45}
.welcome-recovery-text{margin-top:8px}
.welcome-recovery-text textarea{display:block;box-sizing:border-box;width:100%;margin:6px 0 8px;padding:8px;font:inherit}
#welcome-restore-feedback{margin-top:8px}
.empty-conversations{margin:12px 0 18px}
#conversation-list .empty-conversations button{display:inline-block;width:auto;min-height:44px;padding:8px 14px;border:1px solid var(--accent)!important;border-radius:8px;background:var(--paper);color:var(--ink)!important;text-decoration:none}
#conversation-list .empty-conversations button::before,#conversation-list .empty-conversations button::after{display:none}
input,textarea,select{scroll-margin-bottom:calc(32px + env(safe-area-inset-bottom))}
/* En WebView el teclado reduce visualViewport; no conservar una altura
   100dvh fija ni ocultar el compositor durante ese ajuste. */
body:has(#messages-panel:not(.hidden)) .chat-card{height:var(--digame-viewport-height,100dvh);min-height:var(--digame-viewport-height,100dvh);overflow:visible}
.settings-group #diagnostic-text{white-space:pre-line;max-height:18rem;overflow:auto}
.migration-option{display:grid;gap:6px;margin:12px 0;color:var(--ink);font-weight:700}.migration-option select{width:100%;min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;background:var(--surface);color:var(--ink);font:inherit}.migration-option.migration-check{display:block;font-weight:400}.migration-option.migration-check input{width:18px;height:18px;vertical-align:middle}
.network-diagnostic-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.network-diagnostic-output{white-space:pre-wrap;overflow:auto;max-height:28rem;margin:10px 0 0;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-secondary);font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;user-select:text;-webkit-user-select:text}
#diagnostic-meta{white-space:pre-line;display:block;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-secondary);color:var(--ink);font-size:1rem;line-height:1.45;font-weight:700}

/* U1.2: superficie abierta con fragmentos editoriales, nunca una tarjeta. */
.conversation-list button,.conversation-row>button:first-child{position:relative;background:transparent!important;border:0!important;border-radius:0!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important}
.conversation-list button::before,.conversation-row>button:first-child::before{content:"";position:absolute;left:4px;top:12px;width:2px;height:28px;background:var(--border);pointer-events:none}
.conversation-list button::after,.conversation-row>button:first-child::after{content:"";position:absolute;left:4px;bottom:7px;width:36px;height:2px;background:var(--border);pointer-events:none}
.conversation-list button>span:not(.avatar):not(.transport),.conversation-row>button:first-child>span:not(.avatar):not(.transport){color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;font-weight:650}
.conversation-list button:has(.unread-badge)>span:not(.avatar):not(.transport),.conversation-row>button:first-child:has(.unread-badge)>span:not(.avatar):not(.transport){font-weight:750}
.conversation-list button:has(.unread-badge)::before,.conversation-list button:has(.unread-badge)::after,.conversation-row>button:first-child:has(.unread-badge)::before,.conversation-row>button:first-child:has(.unread-badge)::after{background:var(--accent)}
.conversation-list button small,.conversation-row>button:first-child small{color:var(--ink-secondary)!important;-webkit-text-fill-color:var(--ink-secondary)!important;font-weight:400}
.conversation-row>button:last-child{min-width:44px;min-height:44px;width:auto;padding:8px 10px;background:transparent!important;color:var(--ink-secondary)!important;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem}
.conversation-list .unread-badge,.conversation-row .unread-badge{background:var(--accent);color:#fff!important;-webkit-text-fill-color:#fff!important}

/* V3: iconos y conexión independientes de la fuente del sistema. */
.ui-icon{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.call-link .ui-icon{width:24px;height:24px}.composer .ui-icon{width:22px;height:22px}.send-icon{fill:currentColor;stroke:currentColor;stroke-width:1.5}.conversation-header .back{display:grid;place-items:center;min-width:48px;min-height:48px}.conversation-header .conversation-title{display:flex;align-items:center;gap:10px;min-width:0}.conversation-header .conversation-title .avatar{width:34px;height:34px;font-size:.78rem;border-width:1.5px}.connection-cable{width:112px;height:20px;flex:none;fill:none;stroke:var(--success);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.status.connected::before{content:none}.day-separator{display:flex;align-items:center;gap:10px;color:var(--ink-secondary);font-size:var(--text-meta);margin:var(--space-4) 0 var(--space-2)}.day-separator::before,.day-separator::after{content:"";height:1px;background:var(--border);flex:1}.message a{color:var(--accent-blue);text-decoration-thickness:2px;text-underline-offset:2px}.image-message{border:1px solid var(--border);border-radius:var(--radius-md)}
.status{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:22px;margin:2px 0 4px;font-size:var(--text-meta)}.connection-cable{width:78px;height:16px}.day-separator.today{width:max-content;margin-left:auto;margin-right:auto;padding:4px 12px;border-radius:999px;background:var(--surface-secondary);font-weight:700;color:var(--ink)}.day-separator.today::before,.day-separator.today::after{display:none}
@media(max-width:390px){.status{font-size:14px}.connection-cable{width:66px}}

/* V4: llamada como superficie clara, sin alterar su funcionamiento. */
.call-panel{display:grid;justify-items:center;gap:12px;padding:18px 0 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}.call-phone{color:var(--accent)}.call-phone-icon{width:82px;height:52px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.call-person{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:750}.call-person .avatar{width:42px;height:42px;font-size:.85rem}.call-panel>strong{font-size:1.05rem;color:var(--ink-secondary)}.call-videos{width:100%;display:flex;gap:10px;justify-content:center;padding:0 12px}.call-videos video{width:100%;max-height:44vh;background:#201b18;border-radius:var(--radius-md);object-fit:cover}.call-videos video[hidden]{display:none}.call-videos:has(video:not([hidden])) audio{display:none}.call-controls{width:min(100%,520px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px}.call-controls button{min-height:52px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:var(--radius-sm);background:var(--surface-secondary);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.call-controls button:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.call-controls #call-answer{background:var(--success);color:#fff}.call-controls #call-reject,.call-controls #call-hangup{background:var(--accent);color:#fff}.call-controls #call-hangup{grid-column:3}.call-controls #call-mute,.call-controls #call-video{background:var(--surface-secondary)}
@media(max-width:390px){.call-panel{padding-top:12px;gap:9px}.call-phone-icon{width:68px;height:44px}.call-controls{grid-template-columns:1fr 1fr}.call-controls #call-hangup{grid-column:1/-1}.call-controls button{min-height:50px}}
.presence-status{font-size:var(--text-meta);font-weight:650}.presence-disponible{color:var(--success)}.presence-conectado{color:var(--success)}.presence-no-disponible{color:var(--ink-secondary)}
.call-connection{display:grid;place-items:center;min-height:20px}.call-connection[hidden]{display:none}.call-connection .connection-cable{stroke:var(--accent);width:112px;height:20px}.call-panel.video-active .call-phone,.call-panel.video-active .call-connection,.call-panel.video-active .call-person{display:none}.call-panel.video-active .call-videos{padding-top:4px}.call-panel.video-active .call-videos video{max-height:54vh}.call-panel.video-active .call-local-video:not([hidden]){position:absolute;width:26%;max-width:150px;right:18px;bottom:86px;border:2px solid var(--paper);z-index:2}
/* V5: tolerancia movil, zoom y focus sin cambiar flujos. */
html{overflow-x:hidden}body{min-height:100svh;min-height:100dvh;overflow-x:hidden}.chat-card{min-height:100svh;min-height:100dvh;padding-top:calc(var(--space-4) + env(safe-area-inset-top));padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}.messages-panel{min-height:calc(100svh - 150px);min-height:calc(100dvh - 150px)}
header,.conversation-header,.panel-heading{min-width:0}.top-actions{flex:none}.brand,h1,h2,h3,.conversation-name{overflow-wrap:anywhere}.conversation-header .conversation-title{min-width:0;overflow:hidden}.conversation-header .conversation-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-header .call-link,.conversation-header .person-menu{flex:none}.panel,.preferences-dialog,.call-panel{max-width:100%;overflow-wrap:anywhere}.panel input,.preferences-dialog button,.preferences-dialog input{font-size:16px;line-height:1.35}.composer{padding-bottom:calc(env(safe-area-inset-bottom));}.composer input{font-size:16px;line-height:1.35}.messages{min-width:0;overscroll-behavior-y:contain}.message{min-width:0;overflow-wrap:anywhere}.message-body{max-width:100%;overflow-wrap:anywhere}.message-body a{overflow-wrap:anywhere;word-break:break-word}.image-message{display:block;max-width:100%;height:auto;object-fit:contain}.message-body audio{display:block;max-width:100%;width:min(300px,70vw)}.image-modal{width:min(94vw,720px);max-width:94vw;max-height:90dvh;max-height:90svh;overflow:auto}.image-modal img,.image-modal video{display:block;max-width:100%;max-height:76dvh;height:auto}.media-viewer-open{margin-top:6px;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:650;text-decoration:underline;cursor:pointer}.image-modal #media-download{display:inline-flex;margin:10px 0 0;text-decoration:none}.toast{bottom:calc(20px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}
button,a,input,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent-blue);outline-offset:2px}.panel button:disabled,.composer button:disabled{background:#a79b91;color:#fff;opacity:1}.call-panel{position:relative;max-width:100%;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.call-videos{min-width:0}.call-videos video{max-width:100%;height:auto}.call-controls{max-width:100%}
@media(max-width:430px){.chat-card{padding-left:var(--space-3);padding-right:var(--space-3)}.conversation-header{gap:4px}.conversation-header .conversation-title{gap:6px}.conversation-header .conversation-title .avatar{width:32px;height:32px}.conversation-header .call-link,.conversation-header .person-menu summary{min-width:48px;min-height:48px}.composer{gap:5px}.composer input{min-width:0}.composer button{padding-left:10px;padding-right:10px}.call-controls{padding-left:6px;padding-right:6px}}
@media(max-width:370px){.brand{font-size:1.65rem}.conversation-header .conversation-title{font-size:1.18rem}.conversation-header .conversation-title .avatar{width:30px;height:30px}.call-controls button{font-size:.92rem}.call-person{font-size:1.12rem}}
@media(min-width:521px){.chat-card{padding-left:clamp(var(--space-4),4vw,var(--space-5));padding-right:clamp(var(--space-4),4vw,var(--space-5))}}
@media(orientation:landscape) and (max-height:520px){.chat-card{padding-top:calc(var(--space-2) + env(safe-area-inset-top));padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom))}.call-panel{gap:6px;padding-top:8px;padding-bottom:8px}.call-phone-icon{width:58px;height:36px}.call-videos video{max-height:55svh;max-height:55dvh}.call-controls button{min-height:48px}}
.call-readiness-dialog{max-width:min(92vw,440px)}.call-readiness-list{display:grid;gap:8px;margin:14px 0 18px;padding:0;list-style:none}.call-readiness-list li{position:relative;padding-left:24px;color:var(--ink-secondary)}.call-readiness-list li::before{position:absolute;left:0;font-weight:800}.call-readiness-list li.ready::before{content:'✓';color:var(--success)}.call-readiness-list li.pending::before{content:'!';color:var(--accent)}
[data-text-size="large"] .call-person{font-size:1.35rem}[data-text-size="large"] .call-panel>strong{font-size:1.15rem}[data-text-size="large"] .call-controls button{font-size:1.05rem}[data-density="compact"] .call-panel{gap:8px;padding-top:10px;padding-bottom:10px}[data-density="compact"] .call-controls{gap:8px}[data-density="compact"] .call-controls button{min-height:50px}
.messages-panel{height:0;min-height:0}.messages{min-height:0}
.message-sender{display:block;margin:0 0 5px;color:var(--accent);font-size:var(--text-meta);font-weight:800}
.pairing-dialog{width:min(92vw,480px);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);background:var(--paper);color:var(--ink);box-shadow:0 12px 40px #17161455}.pairing-dialog::backdrop{background:#17161477}.pairing-dialog p{line-height:1.45;color:var(--ink-secondary)}.pairing-dialog #compatibility-group{border:0;padding:0}.pairing-dialog #pair-form{display:grid;gap:12px}.pairing-dialog #pair-code{display:block;padding:12px;background:var(--surface-secondary);border:1px solid var(--border);font-size:1.5rem;letter-spacing:.12em;text-align:center;overflow-wrap:anywhere}.pairing-dialog #pair-instructions{padding:12px;border-left:4px solid var(--accent);background:var(--surface-secondary);color:var(--ink)}
.associate-contact-dialog{width:min(92vw,480px);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);background:var(--paper);color:var(--ink);box-shadow:0 12px 40px #17161455}.associate-contact-dialog::backdrop{background:#17161477}.associate-contact-dialog p{line-height:1.45;color:var(--ink-secondary)}.associate-contact-options{display:grid;gap:8px}.associate-contact-options button{min-height:50px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer}.associate-contact-options button:hover,.associate-contact-options button:focus-visible{border-color:var(--accent-blue);background:var(--surface-secondary)}
.media-source-dialog{width:min(92vw,420px);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);background:var(--paper);color:var(--ink);box-shadow:0 12px 40px #17161455}.media-source-dialog::backdrop{background:#17161477}.media-source-options{display:grid;gap:10px}.media-source-options button{min-height:52px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--accent);color:#fff;font:inherit;font-weight:700;text-align:left;cursor:pointer}.media-source-options button.secondary{background:var(--ink-secondary)}
.media-preview-dialog,.migration-dialog{width:min(92vw,480px);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);background:var(--paper);color:var(--ink);box-shadow:0 12px 40px #17161455}.media-preview-dialog::backdrop,.migration-dialog::backdrop{background:#17161477}.media-preview-dialog label,.migration-dialog label{display:block;margin-top:12px;font-weight:700}.media-preview-dialog input,.migration-dialog input{box-sizing:border-box;width:100%;min-height:48px;margin-top:6px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px;font:inherit}.media-preview-dialog img,.media-preview-dialog video{display:block;width:100%;max-height:45dvh;object-fit:contain;border-radius:var(--radius-sm);background:#171614}.media-preview-actions,.migration-dialog #migration-confirmation{display:flex;gap:10px;margin-top:14px}.media-preview-actions button,.migration-dialog button{min-height:48px;flex:1;border:0;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font:inherit;font-weight:700}.migration-dialog #migration-confirmation .secondary,.media-preview-actions .secondary{background:var(--ink-secondary)}
.web-camera-dialog{width:min(94vw,520px);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);background:var(--paper);color:var(--ink);box-shadow:0 12px 40px #17161455}.web-camera-dialog::backdrop{background:#17161477}.web-camera-dialog video{display:block;width:100%;max-height:62dvh;object-fit:cover;border-radius:var(--radius-sm);background:#171614}.media-preparing{display:flex;align-items:center;gap:8px;min-height:42px;color:var(--ink-secondary);font-size:var(--text-meta);font-weight:700}.media-preparing .connection-cable{width:70px;height:16px;transform-origin:center;animation:digame-cable-swing 1.35s ease-in-out infinite alternate}@keyframes digame-cable-swing{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}@media(prefers-reduced-motion:reduce){.media-preparing .connection-cable{animation:none}}
/* En conversación, el viewport pertenece a la cabecera, historial y compositor;
   sólo el historial debe crecer y desplazarse. */
body:has(#messages-panel:not(.hidden)) .chat-card{height:var(--digame-viewport-height,100dvh);min-height:var(--digame-viewport-height,100dvh);overflow:visible}
body:has(#messages-panel:not(.hidden)) .messages-panel{height:auto;min-height:0;overflow:visible}
/* Cabecera principal: marca y navegación forman una sola superficie compacta. */
#main-header{align-items:center;gap:8px;margin-bottom:2px;padding-bottom:9px}
.brand-lockup{display:flex;align-items:center;gap:3px;min-width:0;flex:1;overflow:hidden}
.brand-isotype{width:54px;height:55px;overflow:hidden;flex:none;display:flex;align-items:center}
.brand-isotype img{display:block;width:70px;height:59px;max-width:none;object-fit:cover;object-position:left center}
.brand-cable{width:42px;height:16px;flex:none;fill:none;stroke:var(--accent);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.brand-copy{min-width:0;line-height:1}
.brand{font-family:"URW Chancery L","Brush Script MT","Segoe Script",cursive;font-size:1.9rem;font-style:italic;font-weight:700;letter-spacing:-.04em;color:var(--accent)}
.identity-name{margin-top:4px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent);font-family:"URW Chancery L","Brush Script MT","Segoe Script",cursive;font-size:1rem;font-style:italic}
.top-actions{gap:2px;align-items:center}
.icon-button{display:grid;place-items:center;width:48px;height:48px;padding:8px;border-radius:var(--radius-sm);color:var(--ink)}
.icon-button .ui-icon{width:25px;height:25px;stroke-width:1.9}
#unified-panel{margin-top:0;padding-top:0}
#unified-panel .section-heading{margin:0}
#unified-panel h2{margin:0 0 7px}
#status:empty,#error:empty{display:none}
.permission-settings-action{margin-left:6px;border:0;border-radius:6px;padding:5px 8px;background:var(--accent,#c64e31);color:#fff;font:inherit;font-size:.9em;cursor:pointer}

/* Navegación por teclado y sensibilidad al movimiento. */
:focus-visible{outline:3px solid #1a6c84;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.alerts-status-button{display:grid;place-items:center;flex:none;width:36px;height:36px;margin-left:auto;border:0;border-radius:50%;background:transparent;color:var(--accent);cursor:pointer}.alerts-status-button:hover,.alerts-status-button:focus-visible{background:var(--surface-secondary);color:var(--accent)}.alerts-status-button .alerts-slash{display:none}.alerts-status-button.is-muted{color:#8a4134;opacity:1}.alerts-status-button.is-muted .alerts-slash{display:block;stroke-width:2.6}.alerts-status-button.is-blocked{color:#a33a2c}.message-channel{color:var(--ink-secondary);font-weight:650}.whatsapp-message{border-left:3px solid #4e8063}.known-digame-member{display:block;width:max-content;max-width:100%;border:0;padding:0;background:transparent;color:var(--accent-blue);font:inherit;font-weight:700;text-align:left;cursor:pointer}
@media(max-width:390px){#main-header{gap:3px}.brand-isotype{width:47px;height:50px}.brand-isotype img{width:64px;height:54px}.brand-cable{width:32px;height:14px}.brand{font-size:1.7rem}.identity-name{font-size:.92rem;max-width:82px}.icon-button{width:46px;height:46px;padding:7px}.icon-button .ui-icon{width:23px;height:23px}}
/* Cabecera simplificada: únicamente el logo y los tres accesos globales. */
.brand-lockup{gap:0}
.brand-logo{display:block;width:clamp(128px,42vw,190px);height:auto;max-width:100%;object-fit:contain}
.add-contact-options{display:grid;gap:8px}
.contact-item{display:flex;align-items:center;gap:10px}
.contact-list .contact-item{display:flex;align-items:center}
.contact-item .contact-person{flex:1;min-width:0}
.contact-menu{flex:none;margin-left:auto}
.add-actions>#add-contact-action{display:flex;align-items:center;justify-content:center;gap:10px}
.toggle-indicator{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid currentColor;transition:transform .15s ease}
#add-contact-action[aria-expanded="true"] .toggle-indicator{transform:rotate(180deg)}
[hidden].voice-preview{display:none!important}
#voice-button{touch-action:none;user-select:none;-webkit-user-select:none}
.voice-recording-status{margin:8px 0 0;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-secondary);color:var(--ink);font-size:var(--text-meta);font-weight:700}
[data-voice-recording="true"] #voice-button{background:var(--accent)!important;color:#fff;transform:scale(1.04)}.voice-preview{display:grid;gap:8px;margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}.voice-preview-player{display:flex;align-items:center;gap:8px}.voice-preview-player input{flex:1;min-width:0}.voice-preview-player button,.voice-preview-actions button{min-height:44px;border:0;border-radius:var(--radius-sm);padding:8px 12px;background:var(--accent);color:#fff;font:inherit;font-weight:700}.voice-preview-actions{display:flex;justify-content:flex-end;gap:8px}.voice-preview-actions .secondary{background:var(--surface-secondary);color:var(--ink)}.voice-message{display:flex;align-items:center;gap:8px;min-width:180px}.voice-message button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer}.voice-message input{flex:1;min-width:70px}.voice-message-duration{font-size:var(--text-meta);color:var(--ink-secondary);white-space:nowrap}

/* H3-A.1: no convertir visualViewport.height en una altura global. El
   WebView/viewport CSS decide el espacio disponible y el historial flex
   conserva el scroll interno. */
body:has(#messages-panel:not(.hidden)){display:block;min-height:100dvh}
body:has(#messages-panel:not(.hidden)) .chat-card{height:calc(100dvh - var(--digame-keyboard-inset, 0px));min-height:0;overflow:visible;margin:0 auto}
body:has(#messages-panel:not(.hidden)) .messages-panel{display:flex;flex:1;min-height:0;height:0;overflow:visible}
body:has(#messages-panel:not(.hidden)) .messages{flex:1;min-height:0;overflow-y:auto}
body:has(#messages-panel:not(.hidden)) .composer{position:static;flex:none}
/* El WebView puede incluir una superficie de autofill/IME en la diferencia
   innerHeight-visualViewport. No usarla para encoger la conversación. */
body:has(#messages-panel:not(.hidden)) .chat-card{height:100dvh;min-height:0}
body:has(#messages-panel:not(.hidden)){overflow:hidden;position:fixed;inset:0;width:100%;}
body:has(#messages-panel:not(.hidden)) .chat-card{height:100dvh;min-height:0;overflow:hidden}
body:has(#messages-panel:not(.hidden)) .messages-panel{height:0;min-height:0;overflow:hidden}
body:has(#messages-panel:not(.hidden)) .messages{overflow-y:auto;overscroll-behavior:contain}
body{min-height:100dvh}
.chat-card{min-height:100dvh}
[class~="call-overlay"]{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));z-index:1000;max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 12px 36px #201b1866}

/* U1.3: composición editorial compacta. El avatar, el nombre y el
   contenido forman un único bloque; los fragmentos siguen abiertos. */
.conversation-list button,.conversation-row>button:first-child{
  grid-template-columns:auto minmax(0,1fr) auto!important;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:var(--space-2);
  row-gap:2px;
}
.conversation-list button>.avatar,.conversation-row>button:first-child>.avatar{
  grid-column:1!important;
  grid-row:1/3!important;
}
.conversation-list button>span:not(.avatar):not(.transport),
.conversation-row>button:first-child>span:not(.avatar):not(.transport){
  grid-column:2!important;
  grid-row:1!important;
  justify-self:start;
  min-width:0;
}
.conversation-list button small,.conversation-row>button:first-child small{
  grid-column:2!important;
  grid-row:2!important;
  justify-self:start;
  min-width:0;
}
.conversation-list button>.transport,.conversation-row>button:first-child>.transport{
  grid-column:3!important;
  grid-row:1/3!important;
  align-self:center;
}

/* El marco enlaza visualmente las dos líneas sin encerrar la fila. */
.conversation-list button::before,.conversation-row>button:first-child::before{
  top:8px;
  height:calc(100% - 16px);
}
.conversation-list button::after,.conversation-row>button:first-child::after{
  width:clamp(72px,28%,180px);
  bottom:6px;
}

@media(max-width:370px){
  .conversation-list button,.conversation-row>button:first-child{column-gap:8px;padding-left:2px;padding-right:2px}
  .conversation-list button::after,.conversation-row>button:first-child::after{width:28%;min-width:64px}
}

/* U1.4: pequeño ajuste de intención editorial, sin cerrar el marco. */
.conversation-list button::before,.conversation-row>button:first-child::before{
  width:2.5px;
  top:7px;
  height:calc(100% - 13px);
}
.conversation-list button:has(.unread-badge)::after,
.conversation-row>button:first-child:has(.unread-badge)::after{
  width:clamp(78px,30%,180px);
}

/* La acción secundaria se lee como anotación de la fila, no como botón
   independiente, conservando un target táctil cómodo. */
.conversation-row>button:last-child{
  min-width:44px;
  min-height:44px;
  padding:8px 4px;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent!important;
  color:var(--ink-secondary)!important;
  font-size:.88rem;
  font-weight:650;
  text-align:right;
}
.conversation-row>button:last-child:hover,
.conversation-row>button:last-child:focus-visible{
  color:var(--accent)!important;
  border-bottom-color:var(--accent);
  background:transparent!important;
}

/* U1.5: las filas desconocidas conservan el mismo eje que una fila con
   avatar, aunque su botón principal no tenga avatar propio. */
.conversation-row:has(>button + button)>button:first-child{
  padding-left:calc(44px + var(--space-2));
}
.conversation-row:has(>button + button)>button:first-child::before,
.conversation-row:has(>button + button)>button:first-child::after{
  left:calc(44px + var(--space-2));
}

/* Firma editorial: vertical continua, capitel superior desplazado y
   filete inferior deliberadamente interrumpido. */
.conversation-list button::before,.conversation-row>button:first-child::before{
  left:4px;
  width:24px;
  height:calc(100% - 14px);
  top:7px;
  background:
    linear-gradient(var(--border),var(--border)) 0 0/2.5px 100% no-repeat,
    linear-gradient(var(--border),var(--border)) 0 0/17px 2.5px no-repeat;
}
.conversation-list button::after,.conversation-row>button:first-child::after{
  left:4px;
  width:clamp(78px,30%,180px);
  height:3px;
  bottom:6px;
  background:
    linear-gradient(var(--border),var(--border)) 0 0/68% 2.5px no-repeat,
    linear-gradient(var(--border),var(--border)) 80% 0/20% 2.5px no-repeat;
}
.conversation-list button:has(.unread-badge)::before,
.conversation-list button:has(.unread-badge)::after,
.conversation-row>button:first-child:has(.unread-badge)::before,
.conversation-row>button:first-child:has(.unread-badge)::after{
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/2.5px 100% no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 0/17px 2.5px no-repeat;
}
.conversation-list button:has(.unread-badge)::after,
.conversation-row>button:first-child:has(.unread-badge)::after{
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/68% 2.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 80% 0/20% 2.5px no-repeat;
}
@media(max-width:370px){
  .conversation-row:has(>button + button)>button:first-child{padding-left:calc(44px + 8px)}
  .conversation-row:has(>button + button)>button:first-child::before,
  .conversation-row:has(>button + button)>button:first-child::after{left:calc(44px + 8px)}
}

/* U1.6: la filigrana pertenece a la sección; las filas sólo organizan. */
#unified-panel .section-heading{
  position:relative;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
#unified-panel .section-heading::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:clamp(96px,38%,230px);
  height:9px;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/42px 2px no-repeat,
    linear-gradient(var(--border),var(--border)) 0 7px/28px 2px no-repeat;
  pointer-events:none;
}
#unified-panel .section-heading::after{
  content:"";
  position:absolute;
  left:38px;
  bottom:-6px;
  width:14px;
  height:10px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  pointer-events:none;
}

/* Las conversaciones vuelven a un marco subordinado: un trazo vertical
   y un filete corto, sin capitel ni segmentos internos por fila. */
.conversation-list button::before,.conversation-row>button:first-child::before{
  left:4px;
  width:2px;
  height:calc(100% - 14px);
  top:7px;
  background:var(--border);
}
.conversation-list button::after,.conversation-row>button:first-child::after{
  left:4px;
  width:clamp(72px,24%,160px);
  height:2px;
  bottom:6px;
  background:var(--border);
}
.conversation-list button:has(.unread-badge)::before,
.conversation-row>button:first-child:has(.unread-badge)::before{background:var(--accent)}
.conversation-list button:has(.unread-badge)::after,
.conversation-row>button:first-child:has(.unread-badge)::after{background:var(--accent)}

/* Reservar la columna del avatar al desconocido alinea el contenido sin
   aplicar padding al bloque completo. */
.conversation-row:has(>button + button)>button:first-child{
  padding-left:var(--space-1);
  grid-template-columns:44px minmax(0,1fr) auto!important;
}
.conversation-row:has(>button + button)>button:first-child::before,
.conversation-row:has(>button + button)>button:first-child::after{left:4px}

/* + contacto: anotación ligera, sin marco propio ni caja. */
.conversation-row>button:last-child{
  border-bottom:0;
  color:var(--accent)!important;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:4px;
}
@media(max-width:370px){
  .conversation-row:has(>button + button)>button:first-child{padding-left:2px;grid-template-columns:44px minmax(0,1fr) auto!important}
}

/* U1.7: el botón principal de una fila nueva vuelve exactamente al mismo
   grid que una conversación normal; sólo la acción secundaria queda fuera. */
.conversation-row:has(>button + button)>button:first-child{
  padding:var(--space-3) var(--space-1);
  grid-template-columns:auto minmax(0,1fr) auto!important;
}
.conversation-row:has(>button + button)>button:first-child::before,
.conversation-row:has(>button + button)>button:first-child::after{left:4px}

@media(max-width:370px){
  .conversation-row:has(>button + button)>button:first-child{
    padding:var(--space-3) 2px;
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }
}

/* U1.8: una sola geometría de fila; la acción secundaria ocupa su propia
   celda y nunca invade el contenido principal. */
.conversation-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:0;
  min-width:0;
}
.conversation-row>button:first-child{
  width:100%;
  min-width:0;
  flex:none!important;
}
.conversation-row>button:last-child{
  align-self:center;
  justify-self:end;
  flex:none;
  white-space:nowrap;
}

/* La filigrana es ahora un asset vectorial de sección, no pseudo-líneas
   genéricas. */
#unified-panel .section-heading::before,
#unified-panel .section-heading::after{display:none}
#unified-panel .section-heading .section-filigree{
  display:block;
  width:clamp(110px,30vw,180px);
  height:auto;
  flex:none;
  margin-left:auto;
}
@media(max-width:430px){
  .conversation-row:has(>button + button){
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
  }
  .conversation-row:has(>button + button)>button:last-child{
    grid-column:1;
    grid-row:2;
    min-height:44px;
    margin-top:-2px;
  }
  #unified-panel .section-heading .section-filigree{width:clamp(92px,28vw,140px)}
}

/* U1.9: la grid no puede sumar el ancho intrínseco de sus hijos al
   viewport. El contenido principal encoge y la acción queda acotada. */
.conversation-row{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.conversation-row>*{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
.conversation-row>button:first-child{
  width:auto;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
.conversation-row>button:last-child{
  width:auto;
  max-width:100%;
  min-width:44px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* U1.10: separación fija y común entre firma, avatar y contenido. */
.conversation-list button,.conversation-row>button:first-child{
  grid-template-columns:52px minmax(0,1fr) auto!important;
  padding-left:0;
}
.conversation-list button>.avatar,.conversation-row>button:first-child>.avatar{
  grid-column:1!important;
  justify-self:end;
  margin-left:0;
  margin-right:0;
}
.conversation-list button>span:not(.avatar):not(.transport),
.conversation-row>button:first-child>span:not(.avatar):not(.transport),
.conversation-list button small,.conversation-row>button:first-child small{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.conversation-list button>span:not(.avatar):not(.transport),
.conversation-row>button:first-child>span:not(.avatar):not(.transport){
  text-decoration:none!important;
  color:var(--ink)!important;
}
.conversation-list button::before,.conversation-row>button:first-child::before{left:0}
.conversation-list button::after,.conversation-row>button:first-child::after{
  left:0;
  width:clamp(50px,20%,80px);
}
.conversation-row:has(>button + button)>button:first-child::before,
.conversation-row:has(>button + button)>button:first-child::after{left:0}

/* U1.11: la filigrana cierra el heading; no se duplica con una línea CSS. */
#unified-panel .section-heading{border-bottom:0!important}

/* Acción secundaria compacta: sólo el símbolo es visible, el área táctil
   sigue siendo de al menos 44 px. */
.conversation-row>button.secondary-action,
.conversation-row:has(>button + button)>button:last-child{
  min-width:44px;
  min-height:44px;
  width:44px;
  padding:0;
  border:0!important;
  border-radius:0;
  background:transparent!important;
  color:var(--accent)!important;
  font-size:1.6rem;
  font-weight:700;
  line-height:1;
  text-align:center;
  text-decoration:none!important;
}
.conversation-row>button.secondary-action:hover,
.conversation-row>button.secondary-action:focus-visible,
.conversation-row:has(>button + button)>button:last-child:hover,
.conversation-row:has(>button + button)>button:last-child:focus-visible{
  color:var(--accent)!important;
  background:transparent!important;
  text-decoration:none!important;
}

/* U1.12: la acción + no dibuja ninguna parte del marco de la fila. */
.conversation-row>button.secondary-action,
.conversation-row>button.secondary-action::before,
.conversation-row>button.secondary-action::after,
.conversation-row:has(>button + button)>button:last-child,
.conversation-row:has(>button + button)>button:last-child::before,
.conversation-row:has(>button + button)>button:last-child::after{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  content:none;
}
.conversation-row>button.secondary-action,
.conversation-row:has(>button + button)>button:last-child{
  width:44px;
  min-width:44px;
  max-width:44px;
  min-height:44px;
  padding:0;
  color:#C63D32!important;
  font-size:1.45rem;
  font-weight:500;
  line-height:1;
  text-align:center;
  text-decoration:none!important;
}

/* U1.12 hotfix: :last-child también coincide con el botón principal de
   una fila normal. Sin acción secundaria, éste debe ocupar una sola pista. */
.conversation-row:not(:has(>button + button)){
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto;
}
.conversation-row:not(:has(>button + button))>button:first-child{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:72px;
  padding:var(--space-3) var(--space-1);
  padding-left:0;
  border:0!important;
  border-radius:0;
  background:transparent!important;
  color:var(--ink)!important;
  font:inherit;
  text-align:left;
  text-decoration:none!important;
}
/* U2: Contactos comparte la superficie y la gramática editorial de Principal. */
#plus-panel > .panel-heading{position:relative;display:flex;flex-direction:row!important;align-items:center;min-height:58px;padding:0 0 28px;border-bottom:0}
#plus-panel > .panel-heading h2{display:flex;align-items:center;gap:12px;min-width:0;margin:0;color:var(--ink)}
#plus-panel > .panel-heading h2::after{display:none}
#plus-panel > .panel-heading .panel-close{flex:none;margin-left:auto}
#plus-panel > .panel-heading::after{content:"";position:absolute;right:0;bottom:6px;width:clamp(110px,30vw,180px);height:24px;background:url('/assets/editorial-corner-right.svg') right center/contain no-repeat}
#plus-panel .add-actions{gap:8px;margin:0 0 var(--space-3)}
#plus-panel .contact-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
#plus-panel #add-contact-action,
#plus-panel #connect-whatsapp-action{min-height:44px;max-width:100%;padding:8px 0;background:transparent!important;border:0!important;border-radius:0!important;text-align:left;font-weight:650}
#plus-panel #add-contact-action{color:var(--accent)!important}
#plus-panel #connect-whatsapp-action{color:var(--ink-secondary)!important;font-size:var(--text-meta)}
.whatsapp-management{display:flex;flex-wrap:wrap;gap:8px}
#plus-panel .add-contact-options{padding:0 0 var(--space-2);border-left:2px solid var(--border);margin-left:4px;padding-left:12px}
#plus-panel #add-whatsapp-contact-form{display:grid;gap:8px;padding:10px 0}
#plus-panel #add-whatsapp-contact-form label{color:var(--ink-secondary);font-size:var(--text-meta)}
#plus-panel #add-whatsapp-contact-form input{width:100%;min-height:48px;background:var(--paper);border:1px solid var(--border);border-radius:0;color:var(--ink)}
#plus-panel #add-whatsapp-contact-form p{margin:2px 0;color:var(--ink-secondary);font-size:var(--text-meta)}
#plus-panel .contact-list{gap:2px;margin-top:var(--space-2)}
#plus-panel .contact-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--space-3);min-width:0;min-height:64px;padding:var(--space-2) 0 var(--space-2) 12px;border-bottom:0;background:transparent}
#plus-panel .contact-item::before{content:"";position:absolute;left:0;top:10px;width:2px;height:34px;background:var(--border);pointer-events:none}
#plus-panel .contact-item::after{content:"";position:absolute;left:0;bottom:5px;width:52px;height:2px;background:var(--border);pointer-events:none}
#plus-panel .contact-avatar{position:relative;z-index:1;width:44px;height:44px;margin:0;background:var(--mustard);color:var(--ink)}
#plus-panel .contact-person{min-width:0;width:100%;padding:10px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:var(--ink)!important;background:transparent!important;border:0!important;border-radius:0!important;font-size:var(--text-name);font-weight:650}
#plus-panel .contact-person:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px}
#plus-panel .contact-menu{position:relative;z-index:2;align-self:center;margin-left:auto}
#plus-panel .contact-menu summary{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;color:var(--ink-secondary);background:transparent;border:0;border-radius:0;font-size:1.35rem;line-height:1;cursor:pointer}
#plus-panel .contact-menu summary:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}
#plus-panel .contact-menu > div{right:0;top:44px}
#plus-panel #contact-list > .muted{padding:14px 0 18px;color:var(--ink-secondary)}
#plus-panel .add-contact-options button,
#plus-panel .contact-menu > div button{display:flex;align-items:center;width:100%;min-height:44px;padding:9px 4px;background:transparent!important;color:var(--ink-secondary)!important;border:0;border-bottom:1px solid var(--border);border-radius:0;text-align:left;font:inherit;font-weight:600}
#plus-panel .add-contact-options button:first-child,
#plus-panel .contact-menu > div .contact-share-action{color:var(--accent)!important}
#plus-panel .add-contact-options button:last-child,
#plus-panel .contact-menu > div button:last-child{border-bottom:0}
#plus-panel .contact-menu > div .secondary{color:var(--ink-secondary)!important}
#plus-panel .contact-menu > div{min-width:min(220px,calc(100vw - 48px));padding:8px 10px;background:var(--paper);border:1px solid var(--border);border-radius:0;box-shadow:0 8px 20px #17161422}
#plus-panel #manual-add{display:block}
#plus-panel .contact-menu > div{z-index:20;opacity:1;background:#F7F3EA}
#plus-panel .contact-item{z-index:0}
#plus-panel .contact-item:has(.contact-menu[open]){z-index:10}
#plus-panel .share-contact-hint{grid-column:2 / -1;margin:0;padding:0 0 4px;color:var(--accent);font-size:var(--text-meta);font-weight:600;line-height:1.3}
@media(max-width:430px){#plus-panel > .panel-heading::after{width:clamp(92px,28vw,140px)}#plus-panel .contact-item{column-gap:var(--space-2);padding-left:10px}#plus-panel .contact-person{font-size:1.08rem}}
#plus-panel #contact-management > h3{display:none}
#plus-panel #contact-list{margin-top:var(--space-3)}
#plus-panel .contact-item::before{top:10px;bottom:5px;height:auto}

/* U3.1: Añadir persona comparte la cabecera editorial de Contactos. */
#add-panel > .panel-heading{position:relative;display:flex;flex-direction:row!important;align-items:center;min-height:58px;padding:0 0 28px;border-bottom:0}
#add-panel > .panel-heading h2{min-width:0;margin:0;color:var(--ink)}
#add-panel > .panel-heading .panel-close{flex:none;min-width:44px;min-height:44px;margin-left:auto;padding:0;color:var(--ink);background:transparent!important;border:0!important;border-radius:0!important;font-size:1.5rem;line-height:1}
#add-panel > .panel-heading::after{content:"";position:absolute;right:0;bottom:6px;width:clamp(110px,30vw,180px);height:24px;background:url('/assets/editorial-corner-right.svg') right center/contain no-repeat}
#add-panel > p{margin:0 0 var(--space-4);color:var(--ink-secondary);line-height:1.45}
#add-panel > p strong{color:var(--ink);font-weight:700}
#add-panel #add-contact-form{gap:8px;margin-top:var(--space-2)}
#add-panel #add-contact-form label{color:var(--ink-secondary);font-size:var(--text-meta)}
#add-panel #add-contact-form input{min-height:48px;background:var(--paper);border:1px solid var(--border);border-radius:0;color:var(--ink)}
#add-panel #add-contact-submit{width:max-content;min-width:44px;min-height:48px;padding:8px 4px 10px;background:transparent!important;color:var(--accent)!important;border:0!important;border-radius:0!important;position:relative;font-weight:700}
#add-panel #add-contact-submit::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--accent)}

/* C2: historial y composer integrados en la superficie papel. */
#status{font-size:var(--text-meta);font-weight:600;color:var(--ink-secondary);letter-spacing:.01em}
#status.connected{color:var(--ink-secondary)}
#status.connected .connection-cable{width:58px;height:12px;stroke:var(--border)}
.messages .message{background:var(--surface-secondary);border:1px solid var(--border);border-radius:10px;box-shadow:none}
.messages .message:not(.mine){border-left:2px solid var(--border)}
.messages .message.mine{background:var(--paper);border-right:2px solid var(--accent);border-left:1px solid var(--border)}
.messages .message-meta{color:var(--ink-secondary)}
.messages .message-call-event{align-self:center;max-width:100%;padding:4px 10px;background:transparent!important;border:0!important;border-radius:0;box-shadow:none;text-align:center;color:var(--ink-secondary)}
.whatsapp-media-download{border:1px solid var(--accent);border-radius:8px;padding:8px 10px;background:transparent;color:var(--accent);font:inherit;font-weight:650;cursor:pointer}.whatsapp-media-download:disabled{opacity:.65;cursor:wait}
.messages .message-call-event .message-body{font-size:var(--text-meta);font-weight:650;white-space:normal}
.messages .message-call-event .message-body::before{content:"☎  ";color:var(--accent)}
.delivery-marker{display:inline-block;min-width:1.25em;color:var(--ink-secondary);font-weight:700;letter-spacing:-.12em;text-align:right}.message-meta.pending .delivery-marker{color:var(--accent)}.message-meta.delivered .delivery-marker{color:var(--success)}
.conversation-search-label{display:block;margin:0 0 4px;color:var(--ink-secondary);font-size:var(--text-meta)}#conversation-search{width:100%;margin:0 0 10px}.reply-preview{display:flex;align-items:center;gap:8px;margin:4px 0;padding:7px 10px;border-left:3px solid var(--accent);background:var(--paper);color:var(--ink-secondary);font-size:var(--text-meta)}.reply-preview[hidden],.message-search[hidden]{display:none!important}.reply-preview span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-preview button,.message-local-actions button{min-height:32px;padding:4px 7px;background:transparent;color:var(--ink-secondary);border:0;font:inherit;font-size:var(--text-meta);cursor:pointer}.message-local-actions{display:flex;gap:4px;justify-content:flex-end;margin-top:4px}.message-local-actions button:hover,.message-local-actions button:focus-visible{color:var(--accent);text-decoration:underline}.message-quote{display:block;max-width:100%;margin:0 0 7px;padding:5px 8px;overflow:hidden;border:0;border-left:3px solid var(--accent);background:var(--paper);color:var(--ink-secondary);font:inherit;font-size:var(--text-meta);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}#forward-recipients{display:grid;gap:6px}#forward-recipients button{padding:10px;text-align:left}
.attachment-details{margin:6px 0 0;color:var(--ink-secondary);font-size:var(--text-meta)}
.search-input-row{display:flex;align-items:center;gap:4px}.search-input-row input{min-width:0;flex:1}.search-clear,.search-nav{display:grid;place-items:center;min-width:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-secondary);font:inherit;font-size:1.1rem;cursor:pointer}.search-clear:hover,.search-clear:focus-visible,.search-nav:hover:not(:disabled),.search-nav:focus-visible:not(:disabled){background:var(--paper);color:var(--accent)}.search-nav:disabled{opacity:.4;cursor:default}.conversation-search-match>button:first-child{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}.message-search{display:grid;gap:5px;margin:0 0 8px;padding:8px 0;border-bottom:1px solid var(--border)}.message-search-navigation{display:flex;align-items:center;justify-content:flex-end;gap:4px}.message-search-navigation .muted{margin-right:auto}.messages .message-search-match{box-shadow:inset 3px 0 0 var(--accent)}.messages .message-search-current{outline:2px solid var(--accent);outline-offset:2px}
.message-local-actions{opacity:.62}.message-local-actions:hover,.message:focus-within .message-local-actions{opacity:1}.message-local-actions .message-action-icon{display:grid;place-items:center;width:30px;min-height:30px;padding:0;color:var(--ink-secondary);font-size:1rem;line-height:1}.message-local-actions .message-action-icon.delete{font-size:1.1rem}.message-local-actions .message-action-icon:hover,.message-local-actions .message-action-icon:focus-visible{color:var(--accent);background:var(--paper);text-decoration:none}
.messages .message-call-event .message-meta{text-align:center;font-size:12px}
.messages .contact-invitation{display:grid;gap:4px;min-width:min(220px,100%);padding:10px 12px;border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--paper);color:var(--ink)}
.messages .contact-invitation::before{content:"Contacto compartido";color:var(--ink-secondary);font-size:var(--text-meta);font-weight:600}
.messages .contact-invitation strong{font-size:1.05rem;font-weight:750;overflow-wrap:anywhere}
.messages .contact-invitation a{width:max-content;color:var(--accent);font-weight:700;text-decoration:none}
.composer{border-top:1px solid var(--border);padding-top:10px}
.composer input{border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;color:var(--ink)}
.composer input:focus{border-bottom-color:var(--accent);outline:0}
.composer #image-button,.composer #voice-button{color:var(--ink-secondary);background:transparent}
.composer button[type="submit"]{background:var(--accent);color:#fff}
.composer button:disabled{background:transparent;color:var(--border);border:1px solid var(--border)}

/* C2.1: microfiligrana temporal, sin cambiar el contenido de la fecha. */
.messages .day-separator{width:100%;min-height:24px;margin:var(--space-4) 0 var(--space-2);padding:4px 0;background:url('/assets/editorial-date-divider.svg') center/100% 16px no-repeat;border-radius:0;color:var(--ink-secondary);font-size:var(--text-meta);font-weight:650}
.messages .day-separator::before,.messages .day-separator::after{display:none}
.messages .day-separator.today{width:100%;margin-left:0;margin-right:0;padding:4px 0;background:url('/assets/editorial-date-divider.svg') center/100% 16px no-repeat;border-radius:0;background-color:transparent;color:var(--ink-secondary)}

/* C3: superficie activa de llamada, sin alterar su lifecycle. */
.call-panel{background:var(--paper);border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;padding:12px 0 10px;gap:10px}
.call-panel .call-phone{display:none}
.call-person{font-size:1.15rem;font-weight:750;color:var(--ink)}
.call-panel>strong{font-size:var(--text-meta);font-weight:650;color:var(--ink-secondary)}
.call-controls{width:min(100%,420px);grid-template-columns:repeat(3,minmax(44px,1fr));gap:8px;padding:0 6px}
.call-controls button{min-width:44px;min-height:48px;padding:8px;background:transparent;color:var(--ink);border:1px solid var(--border);border-radius:0;font-size:var(--text-meta);font-weight:700}
.call-controls button[hidden]{display:none!important}
.call-controls #call-answer{background:var(--success);border-color:var(--success);color:#fff}
.call-controls #call-reject,.call-controls #call-hangup{background:var(--accent);border-color:var(--accent);color:#fff}
.call-controls #call-mute,.call-controls #call-video{background:transparent;color:var(--ink)}
.call-controls #call-mute span,.call-controls #call-video span,.call-controls #call-hangup span{display:none}
.call-controls .ui-icon{width:22px;height:22px}
.call-panel.video-active{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px;padding:8px 0 calc(8px + env(safe-area-inset-bottom));background:var(--ink);border:0;color:var(--paper)}
.call-panel.video-active .call-videos{position:relative;display:block;width:100%;min-height:clamp(220px,54vh,520px);padding:0;background:var(--ink);overflow:hidden}
.call-panel.video-active .call-videos #call-remote-video:not([hidden]){display:block;width:100%;height:100%;max-height:64vh;background:var(--ink);object-fit:contain}
.call-panel.video-active .call-videos #call-local-video:not([hidden]){position:absolute;right:12px;bottom:12px;width:clamp(82px,26vw,150px);height:auto;max-height:none;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--paper);border-radius:4px;z-index:2}
.call-panel.video-active .call-controls{z-index:3;width:min(100%,420px);padding:0 8px}
.call-panel.video-active .call-controls button{border-color:#d9cec1;color:var(--paper)}
.call-panel.video-active .call-controls #call-mute,.call-panel.video-active .call-controls #call-video{background:transparent!important;color:var(--paper)!important;border-color:var(--border)}
.call-panel.video-active .call-controls #call-mute.is-active,.call-panel.video-active .call-controls #call-video.is-active{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)}
.call-panel.video-active .call-controls #call-hangup{color:#fff}
@media(max-width:390px){.call-panel{padding-top:10px}.call-controls{gap:6px}.call-controls button{min-height:48px}.call-panel.video-active .call-videos{min-height:220px}.call-panel.video-active .call-videos #call-local-video:not([hidden]){right:8px;bottom:8px;width:88px}}
.whatsapp-import-notice{margin:var(--space-2) 0;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-secondary);color:var(--ink);line-height:1.4}

/* Release candidate controls retain 44px touch targets and keyboard focus. */
#multimanolita-access[hidden]{display:none!important}
.update-anchor{position:relative}.apk-update-badge{position:absolute;right:3px;top:0;color:#be171f;font-size:30px;line-height:20px}.apk-update-badge[hidden]{display:none}
.delivery-marker{white-space:nowrap}.delivery-marker.read{color:#0078a8}.delivery-marker.unknown{color:#a34800}
.whatsapp-history-more{display:block;margin:8px auto 16px;min-height:44px}
#pair-history-limit{min-height:44px;width:100%;margin-bottom:8px}

.conversation-channel{display:block;font-size:.72rem;font-weight:400;color:var(--muted,#666)}

.alerts-status-button{width:44px;height:44px}.alerts-status-button .ui-icon{width:24px;height:24px}
.section-heading .alerts-status-button{background:transparent;border:1px solid #d9cbbd;border-radius:50%;color:#554b42;padding:8px}
.section-heading .alerts-status-button.is-muted{background:#f7f1e8;color:#75685b}
.section-heading .alerts-status-button.is-blocked{background:#fbece8;color:#8b3028}
.section-heading .alerts-status-button:hover,.section-heading .alerts-status-button:focus-visible{background:#eee3d5;outline-offset:3px}
.conversation-channel-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer}
#show-conversation-channels{appearance:none;position:relative;flex:0 0 44px;width:44px;height:26px;margin:0;border:1px solid var(--ink-secondary);border-radius:99px;background:var(--surface-secondary);cursor:pointer}
#show-conversation-channels::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink-secondary)}
#show-conversation-channels:checked{border-color:var(--success);background:var(--success)}
#show-conversation-channels:checked::before{left:21px;background:white}
#show-conversation-channels:focus-visible{outline:2px solid var(--accent-blue);outline-offset:3px}
@media(forced-colors:active){#show-conversation-channels{appearance:auto}}

.message-meta.read .delivery-marker{color:#0078a8}

/* Vinculación: una sola columna incluso con texto grande o teclado abierto. */
.pairing-dialog{box-sizing:border-box;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.pairing-dialog .panel-heading{flex-wrap:wrap;position:sticky;top:0;background:var(--paper);z-index:1}
.pairing-dialog .panel-heading h2{flex:1 1 180px;min-width:0;overflow-wrap:normal}
.pairing-dialog #pair-setup{display:grid;gap:12px}
.pairing-dialog #pair-setup[hidden],.pairing-dialog [hidden]{display:none!important}
.pairing-dialog #pair-code{letter-spacing:.06em;font-size:clamp(1rem,6vw,1.5rem);white-space:nowrap;overflow-wrap:normal}
#connect-whatsapp-main{margin:12px 0;width:100%;white-space:normal}
#unified-panel .section-heading{flex-wrap:wrap}
#unified-panel .section-heading h2{flex:1 1 100%;min-width:0;overflow-wrap:normal;word-break:normal}
#unified-panel .section-heading .section-filigree{display:none}

.pairing-dialog.has-pair-code > p,.pairing-dialog.has-pair-code #compatibility-group > p{display:none}

.pairing-dialog .panel-heading{display:flex;flex-direction:row!important;flex-wrap:nowrap;align-items:flex-start;gap:8px;min-height:0}
.pairing-dialog .panel-heading h2{flex:1 1 auto}
.pairing-dialog button{min-height:48px;padding:10px 12px;border:0;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font:inherit;font-weight:650;cursor:pointer}
.pairing-dialog #pairing-close{flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;background:transparent!important;color:var(--ink);font-size:1.5rem;line-height:1}
.pairing-dialog input,.pairing-dialog select{box-sizing:border-box;width:100%;min-width:0;min-height:48px;padding:10px;font:inherit;border:1px solid var(--border);border-radius:var(--radius-sm)}
.pairing-dialog #pair-check-status{margin-top:12px;width:100%}

/* Verified media visibility and explicit reply channel. */
.image-modal img[hidden],.image-modal video[hidden],.image-modal a[hidden]{display:none!important}
#unified-panel .section-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center}
#unified-panel .section-heading h2{max-width:none!important;width:auto!important;min-width:0!important;font-size:clamp(1rem,6.4vw,1.25rem)!important;overflow-wrap:normal!important;word-break:normal!important}
#unified-panel .section-heading .section-filigree{display:none!important}
#conversation-list .transport{display:none!important}
:root[data-show-conversation-channels="true"] #conversation-list .transport{display:inline-flex!important}
:root:not([data-show-conversation-channels="true"]) #conversation-list .conversation-row>button:first-child{grid-template-columns:52px minmax(0,1fr)!important}
.composer .reply-channel-status{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ink-secondary);font-size:.85rem;padding:4px 0}
.composer .reply-channel-status .change-reply-channel{width:auto;min-height:44px;padding:6px 10px;font:inherit;text-decoration:underline;background:transparent;color:var(--ink)}
.document-card,.shared-whatsapp-contact{display:grid;gap:10px;min-width:0;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-secondary)}
.document-card strong,.shared-whatsapp-contact strong{overflow-wrap:anywhere}
.document-card small{font-size:.85rem;color:var(--ink-secondary);overflow-wrap:anywhere}
.document-card button,.document-card a,.shared-whatsapp-contact button{display:block;min-height:48px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;text-align:left;color:var(--ink);background:var(--paper);text-decoration:none;white-space:normal}
#messages-panel{scroll-margin-top:0}
.message-search-controls{position:sticky;top:0;z-index:3;background:var(--paper)}

.pairing-dialog.is-paired > p,.pairing-dialog.is-paired #compatibility-group > p{display:none}

.conversation-header{position:sticky;top:0;z-index:6;background:var(--paper)}
.conversation-header .conversation-title{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:center}
.conversation-header .conversation-title .avatar{grid-column:1;grid-row:1/3}
.conversation-header .conversation-name{grid-column:2;grid-row:1;min-width:0}
.conversation-header .conversation-channel{grid-column:2;grid-row:2;display:block;min-width:0;font-size:.75rem;font-weight:600;line-height:1.2}
.message-search{position:sticky;top:var(--conversation-header-height,64px);z-index:5;background:var(--paper)}
.previous-conversation-history{box-sizing:border-box;width:min(94vw,640px);max-height:90dvh;overflow:auto;padding:16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--paper);color:var(--ink)}
.previous-conversation-history::backdrop{background:#17161477}
.previous-conversation-history button{min-height:48px;padding:8px 16px;font:inherit}
@media(max-width:430px){
 .conversation-header{display:grid!important;grid-template-columns:48px minmax(0,1fr) 48px;gap:6px}
 .conversation-header .back{grid-column:1;grid-row:1}
 .conversation-header .conversation-title{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr)}
 .conversation-header .conversation-title .avatar{display:none}
 .conversation-header .conversation-name,.conversation-header .conversation-channel{grid-column:1}
 .conversation-header .person-menu{grid-column:3;grid-row:1}
 .conversation-header #message-search-toggle{grid-column:2;grid-row:2;justify-self:end}
 .conversation-header #call-link{grid-column:3;grid-row:2}
}

.conversation-header.hidden{display:none!important}
.media-preview-dialog .panel-heading{display:flex;flex-direction:row!important;align-items:flex-start;gap:8px;min-height:0}
.media-preview-dialog .panel-heading h2{flex:1;min-width:0}
.media-preview-dialog #media-preview-close{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;margin:0;background:transparent;color:var(--ink);font-size:1.5rem}

/* The reply channel occupies its own row; preserve space for writing. */
#composer.composer{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(44px,auto));align-items:center}
#composer .reply-channel-status{grid-column:1/-1;min-width:0}
#composer #message{width:100%;min-width:0;box-sizing:border-box}
#previous-conversation-history-notice{display:block;width:100%;padding:12px;margin:8px 0;text-align:left;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:8px}

/* Small network badges preserve channel identity without repeating names. */
.network-icon{display:block;width:24px!important;height:24px!important;min-width:24px;object-fit:contain;border-radius:6px}
.conversation-list .transport{align-self:center;display:inline-flex;align-items:center;justify-content:center;min-width:24px}
#composer .reply-channel-status{gap:8px;padding:2px 0}
.active-reply-channel{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:2px solid var(--accent);border-radius:10px;background:var(--surface)}
#composer .change-reply-channel{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px;border:1px solid var(--border);border-radius:10px;text-decoration:none}

.whatsapp-security-notice{padding:12px 14px;border-left:3px solid var(--accent);background:var(--surface);color:var(--ink);font-size:.95rem;line-height:1.5;overflow-wrap:break-word}
.whatsapp-security-notice strong{font-weight:700}

/* One slim header and one input row for each person. */
.conversation-list .transport{gap:5px}
.message-network-icon{display:inline-flex;vertical-align:middle;align-items:center;opacity:.65}
.message-meta .message-network-icon .network-icon{width:12px!important;height:12px!important;min-width:12px;filter:grayscale(1);border-radius:0}
#conversation-header.personal-conversation-header{display:grid!important;grid-template-columns:28px minmax(40px,1fr) 36px 36px 36px 28px;gap:4px;align-items:center;padding-top:5px;padding-bottom:5px}
#conversation-header.personal-conversation-header.hidden{display:none!important}
.personal-conversation-header .back{grid-column:1!important;grid-row:1!important;min-width:28px!important;width:28px;padding:0}
.personal-conversation-header .conversation-title{grid-column:2!important;grid-row:1!important;display:block;min-width:0;margin:0}
.personal-conversation-header .conversation-title .avatar{display:none}
.personal-conversation-header .conversation-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(15px,3.8vw,20px);line-height:1.25}
.personal-conversation-header .conversation-channel{display:none!important}
.personal-channel-selector{grid-column:3;grid-row:1;position:relative;min-width:0}
.personal-channel-selector>summary{display:flex;align-items:center;justify-content:center;width:36px;min-height:44px;list-style:none;cursor:pointer;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.personal-channel-selector>summary::-webkit-details-marker{display:none}
.personal-channel-selector.single-channel>summary{border-color:transparent;cursor:default;background:transparent}
.personal-channel-selector .network-icon{width:22px!important;height:22px!important;min-width:22px}
.personal-channel-options{position:absolute;top:100%;right:0;z-index:20;display:grid;gap:4px;min-width:160px;padding:8px;background:var(--paper);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 14px #0002}
.personal-channel-options button{display:flex;align-items:center;gap:8px;min-height:44px;width:100%;padding:8px;font:inherit;background:var(--surface);color:var(--ink);border:1px solid transparent;border-radius:6px}
.personal-channel-options button[aria-pressed="true"]{border-color:var(--accent)}
#conversation-header.personal-conversation-header #message-search-toggle{grid-column:4!important;grid-row:1!important;justify-self:center}
#conversation-header.personal-conversation-header #call-link{grid-column:5!important;grid-row:1!important;justify-self:center}
#conversation-header.personal-conversation-header .person-menu{grid-column:6!important;grid-row:1!important;justify-self:center}
#conversation-header.personal-conversation-header #message-search-toggle,#conversation-header.personal-conversation-header #call-link{width:36px;min-width:36px!important;min-height:44px;padding:4px}
#conversation-header.personal-conversation-header .person-menu summary{width:28px;min-width:28px!important;min-height:44px;padding:0}
.personal-conversation-header #call-link:disabled{opacity:.35;cursor:default}
#composer.composer{grid-template-columns:minmax(0,1fr) repeat(3,minmax(44px,auto))}

.message.message-system-event{align-self:center;max-width:92%;background:transparent;border:0;border-left:0;padding:8px 12px;color:var(--ink-secondary);text-align:center;font-size:.9em}
.message-system-event .message-meta{justify-content:center;font-size:.8em;opacity:.8}