/* Clean phone interior refresh. The physical phone stays the same; this only
   normalises the screen, tabs and embedded contact views after the phone grew
   beyond the original Jamie-only layout. */
.phone-companion .jamie-phone-screen{
  --phone-bg:#f3f1eb;
  --phone-panel:#ffffff;
  --phone-line:#d7d3c9;
  --phone-text:#1c1c1b;
  --phone-muted:#777166;
  --phone-yellow:#ffdf43;
  --phone-yellow-soft:#fff5b9;
  --phone-danger:#a74444;
  background:var(--phone-bg)!important;
  color:var(--phone-text)!important;
}

/* Top chrome */
.phone-companion .phone-status{
  flex-basis:18px;
  height:18px;
  padding:0 10px;
  background:#fbfaf7;
  border-bottom:1px solid #e6e2d8;
  font-size:7.5px;
}
.phone-companion .phone-status-right{font-size:6.5px;color:#5f5a51}
.phone-companion .phone-contact-bar{
  flex-basis:48px;
  min-height:48px;
  grid-template-columns:22px 30px minmax(0,1fr) auto;
  gap:7px;
  padding:5px 8px;
  background:var(--phone-yellow);
  border-top:0;
  border-bottom:1px solid #c9ae1c;
}
.phone-companion .phone-back{width:22px;height:30px;font-size:24px;line-height:28px}
.phone-companion .phone-contact-avatar{width:30px;height:30px;font-size:11px}
.phone-companion .phone-contact-name b{font-size:11px}
.phone-companion .phone-contact-name span{font-size:7.5px;color:#65591e}
.phone-companion .phone-icon-button{
  border:1px solid rgba(0,0,0,.42);
  border-radius:8px;
  padding:5px 7px;
  background:rgba(255,255,255,.55);
  font-size:6.5px;
}

/* Content shell */
.phone-companion .phone-content{background:var(--phone-bg)}
.phone-companion .phone-tab{scrollbar-width:thin;scrollbar-color:#bbb6aa transparent}
.phone-companion .phone-page-title{
  position:sticky;
  top:0;
  z-index:2;
  padding:10px 11px 8px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--phone-line);
  backdrop-filter:blur(5px);
}
.phone-companion .phone-page-title b{font-size:13px;letter-spacing:-.01em}
.phone-companion .phone-page-title span{margin-top:2px;font-size:8px;line-height:1.3;color:var(--phone-muted)}
.phone-companion .phone-empty-state{padding:28px 15px;font-size:9px;line-height:1.45;color:var(--phone-muted)}
.phone-companion .phone-subhead{
  margin:13px 10px 3px;
  font:900 7px Arial;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#817a6c;
}

/* Six-tab bottom navigation */
.phone-companion .phone-nav,
.phone-companion .phone-nav:has([data-phone-contacts]){
  flex:0 0 50px;
  height:50px;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  border-top:1px solid #ccc7bb;
  background:#fbfaf7;
  box-shadow:0 -2px 8px rgba(0,0,0,.04);
}
.phone-companion .phone-nav button{
  position:relative;
  display:flex;
  min-width:0;
  height:50px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  overflow:hidden;
  border:0;
  border-right:0;
  background:transparent;
  color:#777166;
  padding:3px 1px 4px;
  font:800 6px/1 Arial;
  white-space:nowrap;
}
.phone-companion .phone-nav button span{
  display:grid;
  place-items:center;
  width:22px;
  height:19px;
  margin:0;
  border-radius:7px;
  color:#58534b;
  font:900 11px/19px Arial;
}
.phone-companion .phone-nav button.active{
  background:transparent;
  color:#171717;
}
.phone-companion .phone-nav button.active:after{
  content:"";
  position:absolute;
  left:20%;
  right:20%;
  bottom:2px;
  height:3px;
  border-radius:3px;
  background:#d2af00;
}
.phone-companion .phone-nav button.active span{background:var(--phone-yellow-soft);color:#171717}
.phone-companion .phone-nav button:focus-visible{outline:2px solid #222;outline-offset:-2px}

/* Guide / Jamie chat */
.phone-companion .phone-chat{
  inset:0 0 104px 0;
  padding:9px 8px 12px;
  background:#f1efe9;
  background-image:none;
}
.phone-companion .phone-message-row{margin:5px 0}
.phone-companion .phone-bubble{
  max-width:84%;
  border:1px solid #d4d0c6;
  border-radius:13px;
  padding:7px 9px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.phone-companion .from-you .phone-bubble{background:var(--phone-yellow);border-color:#d2b51e}
.phone-companion .phone-bubble p{font-size:10.5px;line-height:1.38}
.phone-companion .phone-bubble small{font-size:6.5px;color:#827c70}
.phone-companion .phone-pin,
.phone-companion .phone-signal-card{
  left:7px;
  right:7px;
  bottom:42px;
  min-height:52px;
  border:1px solid #d7d1c4;
  border-radius:11px;
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.07);
}
.phone-companion .phone-pin small{font-size:6.5px;color:#82731b}
.phone-companion .phone-pin b{font-size:9.5px}
.phone-companion .phone-pin a{border:0;border-radius:8px;background:var(--phone-yellow);padding:5px 7px;font-size:7.5px}
.phone-companion .phone-quick-replies{left:7px;right:7px;bottom:6px;gap:5px}
.phone-companion .phone-quick-replies button{
  min-height:30px;
  border:1px solid #d5d0c5;
  border-radius:9px;
  background:#fff;
  box-shadow:none;
  font-size:8px;
}
.phone-companion .phone-quick-replies button:last-child{background:var(--phone-yellow-soft)}
.phone-companion .phone-story-pin{
  left:7px;
  right:7px;
  bottom:7px;
  border:1px solid #d1c573;
  border-radius:12px;
  background:#fff9cf;
  box-shadow:0 4px 14px rgba(0,0,0,.09);
}
.phone-companion .phone-story-actions button,
.phone-companion .phone-story-question button{border-color:#d3cdbf;border-radius:8px}

/* Threads */
.phone-companion .phone-theory{
  margin:8px;
  padding:9px 10px;
  border:1px solid #dbc765;
  border-radius:11px;
  background:#fff6bd;
  box-shadow:none;
}
.phone-companion .phone-thread-list{padding:0 8px 9px}
.phone-companion .phone-thread-list article{
  margin:6px 0;
  padding:9px;
  border:1px solid var(--phone-line);
  border-radius:11px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.phone-companion .phone-thread-list article>div{gap:5px}
.phone-companion .phone-thread-list b{font-size:9.5px}
.phone-companion .phone-thread-list span{font-size:6.5px}
.phone-companion .phone-thread-list p{font-size:8.5px;line-height:1.38;color:#5f5a51}
.phone-companion .phone-thread-list progress{width:100%;height:5px;margin:6px 0;border:0;border-radius:5px;overflow:hidden;background:#e9e5dc}
.phone-companion .phone-thread-list progress::-webkit-progress-bar{background:#e9e5dc}
.phone-companion .phone-thread-list progress::-webkit-progress-value{background:#d7b600}
.phone-companion .phone-thread-list progress::-moz-progress-bar{background:#d7b600}
.phone-companion .phone-note-drawer{
  margin:0 8px 10px;
  padding:9px;
  border:1px solid var(--phone-line);
  border-radius:11px;
  background:#faf9f5;
}
.phone-companion .phone-note-drawer>b{font-size:9px}
.phone-companion .phone-note-drawer p{font-size:8px;line-height:1.35}

/* Timeline */
.phone-companion .phone-timeline{padding:7px 8px 12px}
.phone-companion .phone-timeline article{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:8px;
  margin:0 0 6px;
  padding:8px;
  border:1px solid var(--phone-line);
  border-radius:10px;
  background:#fff;
}
.phone-companion .phone-timeline time{font:900 9px Arial;color:#8d7916}
.phone-companion .phone-timeline b{font-size:9px}
.phone-companion .phone-timeline p{margin:3px 0 0;font-size:8px;line-height:1.35;color:#625d54}

/* Continuity */
.phone-companion .phone-continuity-card{
  margin:8px;
  padding:10px;
  border:1px solid #d8d2c5;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.phone-companion .phone-continuity-card>small{font-size:6.5px;color:#81741b}
.phone-companion .phone-continuity-card>strong{display:block;margin:5px 0;font-size:18px}
.phone-companion .phone-continuity-card>p{font-size:8.5px;line-height:1.4;color:#5e594f}
.phone-companion .phone-continuity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:9px 0}
.phone-companion .phone-continuity-grid div{padding:7px 3px;border:1px solid #e0dbd0;border-radius:9px;background:#f8f6ef;text-align:center}
.phone-companion .phone-continuity-grid b{display:block;font-size:13px}.phone-companion .phone-continuity-grid span{font-size:6.5px;color:#777166}
.phone-companion .phone-continuity-card>a{display:block;margin-top:5px;border:0;border-radius:8px;background:#f0ede5;color:#222;padding:7px;text-align:center;text-decoration:none;font:900 7.5px Arial}
.phone-companion .phone-continuity-card>a:first-of-type{background:var(--phone-yellow)}

/* More */
.phone-companion .phone-progress-card{
  margin:8px 8px 5px;
  padding:9px 10px;
  border:1px solid var(--phone-line);
  border-radius:11px;
  background:#fff;
}
.phone-companion .phone-progress-card span{font-size:8px;color:#6d675e}
.phone-companion .phone-progress-card b{font-size:17px}
.phone-companion .phone-story-progress{
  margin:0 8px 6px;
  padding:9px;
  border:1px solid var(--phone-line);
  border-radius:11px;
  background:#fff;
}
.phone-companion .phone-story-progress>div{display:flex;justify-content:space-between;gap:7px}.phone-companion .phone-story-progress span{font-size:8px}.phone-companion .phone-story-progress b{font-size:10px}.phone-companion .phone-story-progress p{margin:4px 0 0;font-size:7.5px;line-height:1.35;color:#6f695f}
.phone-companion .phone-progress-grid{grid-template-columns:repeat(2,1fr);gap:5px;margin:0 8px 8px}
.phone-companion .phone-progress-grid div{border:1px solid var(--phone-line);border-radius:9px;background:#fff;padding:6px 4px}
.phone-companion .phone-progress-grid b{font-size:12px}.phone-companion .phone-progress-grid span{font-size:6.5px}
.phone-companion .phone-field{margin:7px 8px}
.phone-companion .phone-field>span{font-size:7px}
.phone-companion .phone-field select{min-height:30px;border:1px solid #c5c0b5;border-radius:8px;background:#fff;font-size:8px}
.phone-companion .phone-field:has([data-assist-voice-select-mini]){display:none!important}
.phone-companion .phone-setting{margin:0 8px;padding:8px 0;border-color:#ded9cf}
.phone-companion .phone-setting div b{font-size:9px}.phone-companion .phone-setting div span{font-size:7px}
.phone-companion .phone-setting button{min-width:44px;min-height:27px;border:0;border-radius:9px;background:var(--phone-yellow);font-size:7px}
.phone-companion .phone-preview{width:calc(100% - 16px);margin:5px 8px;min-height:31px;border:1px solid #d7d1c5;border-radius:9px;background:#fff;font-size:8px}
.phone-companion .phone-danger-zone{gap:5px;margin:9px 8px 12px}
.phone-companion .phone-danger-zone button{min-height:31px;border:1px solid #d7d1c5;border-radius:9px;background:#fff;font-size:8px}
.phone-companion .phone-danger-zone .danger{background:#fff2f0;border-color:#d0a5a0;color:#812f2f}

/* Phone Contacts gets a clean phone UI. /contacts keeps its separate retro UI. */
.phone-companion .phone-contacts-layer{
  z-index:20;
  background:var(--phone-bg)!important;
  color:var(--phone-text)!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.phone-companion .pc-title{
  padding:10px 10px 8px;
  border:0;
  border-bottom:1px solid var(--phone-line);
  background:#fff!important;
  color:#191919!important;
}
.phone-companion .pc-title b{font-size:11px;letter-spacing:0}
.phone-companion .pc-title span{margin-top:2px;font-size:7px;color:#777166!important}
.phone-companion .pc-directory{
  padding:6px 7px 9px;
  border:0;
  background:var(--phone-bg)!important;
}
.phone-companion .pc-contact{
  min-height:46px;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:7px;
  margin:0 0 5px;
  padding:7px 8px;
  border:1px solid var(--phone-line)!important;
  border-radius:10px;
  background:#fff!important;
  color:#171717!important;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.phone-companion .pc-contact:hover,.phone-companion .pc-contact:focus-visible{background:#fff8cf!important;color:#171717!important;outline:2px solid #d2b500;outline-offset:-2px}
.phone-companion .pc-contact.locked{background:#eceae5!important;color:#89837a!important;opacity:.78}
.phone-companion .pc-dot{width:8px;height:8px;border:0;box-shadow:none}
.phone-companion .pc-person b{font-size:9.5px}.phone-companion .pc-person small{font-size:7px;color:#777166!important}
.phone-companion .pc-state{max-width:76px;padding:3px 5px;border-radius:8px;background:#f0eee8;font-size:6px;color:#615c53!important}
.phone-companion .pc-contact:not(.locked) .pc-state{background:#edf6ed;color:#316b3c!important}
.phone-companion .pc-contact.luka .pc-state,.phone-companion .pc-contact.alaric-manual .pc-state{background:#f7eceb;color:#862f2f!important}
.phone-companion .pc-footer{height:20px;flex-basis:20px;border-top:1px solid var(--phone-line);background:#fff;font-size:5.8px;color:#777166}
.phone-companion .pc-chat-head{
  flex-basis:43px;
  min-height:43px;
  padding:5px 6px;
  border:0;
  border-bottom:1px solid var(--phone-line);
  background:#fff!important;
}
.phone-companion .pc-chat-head>button{
  min-height:28px;
  border:1px solid #d2cdc3!important;
  border-radius:8px;
  background:#f7f5ef!important;
  padding:4px 6px;
  font-size:6.5px;
}
.phone-companion .pc-chat-head div b{font-size:9.5px}.phone-companion .pc-chat-head div span{font-size:6.5px;color:#777166}
.phone-companion .pc-messages{
  padding:7px;
  border:0;
  background:#f1efe9!important;
}
.phone-companion .pc-message{margin-bottom:6px;max-width:86%}
.phone-companion .pc-message p{
  border:1px solid #d3cec4;
  border-radius:11px;
  background:#fff!important;
  padding:6px 7px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  font:9px/1.38 Arial,sans-serif;
}
.phone-companion .pc-message.mine p{background:var(--phone-yellow)!important;border-color:#d1b51f}
.phone-companion .pc-compose{
  flex-basis:42px;
  min-height:42px;
  grid-template-columns:minmax(0,1fr) 44px;
  gap:4px;
  padding:5px 6px;
  border-top:1px solid var(--phone-line);
  background:#fff!important;
}
.phone-companion .pc-compose input{border:1px solid #c9c4b9!important;border-radius:9px;background:#fff;padding:5px 7px;font-size:8px}
.phone-companion .pc-compose button{border:0!important;border-radius:9px;background:var(--phone-yellow)!important;font-size:7px}
.phone-companion .pc-empty,.phone-companion .pc-signin,.phone-companion .pc-unavailable{font-size:8px;line-height:1.45}
.phone-companion .pc-signin a{border:0;border-radius:9px;background:var(--phone-yellow);padding:7px 9px}
.phone-companion .pc-big-avatar{border:0;border-radius:50%;background:#191919;color:var(--phone-yellow)}

/* Alaric manual thread inherits the same clean phone treatment even though the
   desktop /contacts version remains its own UI. */
.phone-companion .alaric-phone-thread{background:var(--phone-bg)!important}
.phone-companion .alaric-phone-head{
  min-height:44px;
  padding:6px 7px!important;
  border-bottom:1px solid var(--phone-line)!important;
  background:#fff!important;
}
.phone-companion .alaric-phone-head button{border:1px solid #d2cdc3!important;border-radius:8px!important;background:#f7f5ef!important;padding:5px 7px!important}
.phone-companion .alaric-phone-head b{font-size:10px!important}.phone-companion .alaric-phone-head span{font-size:6.5px!important;color:#777166!important}
.phone-companion .alaric-phone-messages{padding:7px!important;background:#f1efe9!important}
.phone-companion .alaric-phone-message{margin:5px 0!important;border:1px solid #d3cec4!important;border-radius:11px!important;background:#fff!important;padding:7px!important}
.phone-companion .alaric-phone-message.user{margin-left:28px!important;background:#fff2a8!important}.phone-companion .alaric-phone-message.assistant{margin-right:28px!important}
.phone-companion .alaric-phone-message p{font:9px/1.38 Arial,sans-serif!important}
.phone-companion .alaric-phone-compose{padding:5px 6px!important;border-top:1px solid var(--phone-line)!important;background:#fff!important}
.phone-companion .alaric-phone-compose input{border:1px solid #c9c4b9!important;border-radius:9px!important;padding:6px 7px!important}
.phone-companion .alaric-phone-compose button{border:0!important;border-radius:9px!important;background:var(--phone-yellow)!important;padding:6px 9px!important}
.phone-companion .alaric-phone-typing{font-size:7.5px!important;color:#777166!important}

/* Compact small screens without making labels unreadable. */
@media(max-width:360px){
  .phone-companion .phone-nav button{font-size:5.6px}
  .phone-companion .phone-nav button span{width:20px;font-size:10px}
  .phone-companion .phone-contact-bar{grid-template-columns:20px 28px minmax(0,1fr) auto}
  .phone-companion .phone-contact-avatar{width:28px;height:28px}
}