/* sharectl – kundportalen och admin. Samma uttryck som sharectl.com/en/ (web/public/assets/site.css): varm vit
   bakgrund, ljus meny, svarta rundade knappar, tunna kanter och Inter. Blått betyder nytt eller pågår, mint klart.
   Det som bara admin använder ligger i admin.css, som admin.html laddar efter den här. */
:root{
  --paper:#ffffff;--mist:#f4f3f1;--ink:#0b0b0c;--graphite:#5d5d63;--hair:#e7e5e2;--hair-soft:#efedea;
  --action:#0b0b0c;--action-hover:#2a2a2d;--on-action:#ffffff;--accent:#6a4dff;--link:#5b3ff0;
  --bot-ink:#191736;--signal:#47e5b5;--violet:#6a4dff;--orange:#ff6b2c;--amber:#f5a524;--rose:#f25c7a;--leaf:#2fbf71;
  --ok:#1d7a4f;--switch-on:#34c759;--bad:#c4321f;
  --page:#fdfcfb;--inset:#f4f3f1;--field:#ffffff;--raised:#ffffff;--row-hover:#f6f5f2;--muted-strong:#5d5d63;
  --hair-strong:#cfccc8;--secondary-hover:#e9e7e3;--selected:#f4f3f1;--mark:#eceaff;
  --top-bg:rgba(253,252,251,.86);--top-ink:#0b0b0c;--top-muted:#5d5d63;--top-pill:#f0eeeb;--top-hover:rgba(11,11,12,.06);--mark-bg:#0b0b0c;--mark-fg:#ffffff;--ctl:#7c5cff;
  --danger-soft:#fff1f0;--danger-soft-hover:#ffe3e0;--danger-strong:#a8291a;
  --chip-bg:#eceaff;--chip-fg:#3b26b5;--chip-new-bg:#e3f0ff;--chip-new-fg:#0058b0;
  --chip-ok-bg:#e2f6ec;--chip-ok-fg:#1d6b46;--chip-bad-bg:#ffe6eb;--chip-bad-fg:#a3213d;
  --sheet-shadow:0 24px 60px rgba(0,0,0,.22);--backdrop:rgba(0,0,0,.32);--on-bad:#ffffff;--bot-line:#191736;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;  /* as the site: Inter when installed, else the system's */
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);--radius:20px;color-scheme:light}
/* Mörkt läge: följer telefonen eller datorn, om inte kunden har valt Ljust eller Mörkt (data-theme). */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#161618;--mist:#0b0b0c;--ink:#f4f3f1;--graphite:#a3a3a8;--hair:#2c2c30;--hair-soft:#232326;
  --action:#f4f3f1;--action-hover:#ffffff;--on-action:#0b0b0c;--accent:#7c5cff;--link:#a594ff;--ok:#32d74b;--switch-on:#30d158;--bad:#ff6961;
  --page:#0b0b0c;--inset:#1f1f22;--field:#161618;--raised:#26262a;--row-hover:#1f1f22;--muted-strong:#b5b5ba;
  --hair-strong:#4a4a50;--secondary-hover:#2e2e33;--selected:#1f1f22;--mark:#34306a;
  --top-bg:rgba(11,11,12,.86);--top-ink:#f4f3f1;--top-muted:#a3a3a8;--top-pill:#1f1f22;--top-hover:rgba(255,255,255,.08);--mark-bg:#f4f3f1;--mark-fg:#0b0b0c;--ctl:#a594ff;
  --danger-soft:#3a1714;--danger-soft-hover:#4a1d19;--danger-strong:#ff8a80;
  --chip-bg:#2e2a5c;--chip-fg:#c9c2ff;--chip-new-bg:#0a2a4d;--chip-new-fg:#8cc4ff;
  --chip-ok-bg:#0f3324;--chip-ok-fg:#7fe0ac;--chip-bad-bg:#4a1520;--chip-bad-fg:#ff9fb1;
  --sheet-shadow:0 24px 60px rgba(0,0,0,.6);--backdrop:rgba(0,0,0,.55);--on-bad:#1d1d1f;--bot-line:#9d9ab8;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#161618;--mist:#0b0b0c;--ink:#f4f3f1;--graphite:#a3a3a8;--hair:#2c2c30;--hair-soft:#232326;
  --action:#f4f3f1;--action-hover:#ffffff;--on-action:#0b0b0c;--accent:#7c5cff;--link:#a594ff;--ok:#32d74b;--switch-on:#30d158;--bad:#ff6961;
  --page:#0b0b0c;--inset:#1f1f22;--field:#161618;--raised:#26262a;--row-hover:#1f1f22;--muted-strong:#b5b5ba;
  --hair-strong:#4a4a50;--secondary-hover:#2e2e33;--selected:#1f1f22;--mark:#34306a;
  --top-bg:rgba(11,11,12,.86);--top-ink:#f4f3f1;--top-muted:#a3a3a8;--top-pill:#1f1f22;--top-hover:rgba(255,255,255,.08);--mark-bg:#f4f3f1;--mark-fg:#0b0b0c;--ctl:#a594ff;
  --danger-soft:#3a1714;--danger-soft-hover:#4a1d19;--danger-strong:#ff8a80;
  --chip-bg:#2e2a5c;--chip-fg:#c9c2ff;--chip-new-bg:#0a2a4d;--chip-new-fg:#8cc4ff;
  --chip-ok-bg:#0f3324;--chip-ok-fg:#7fe0ac;--chip-bad-bg:#4a1520;--chip-bad-fg:#ff9fb1;
  --sheet-shadow:0 24px 60px rgba(0,0,0,.6);--backdrop:rgba(0,0,0,.55);--on-bad:#1d1d1f;--bot-line:#9d9ab8;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--page);color:var(--ink);font:17px/1.47 var(--font);letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--link);text-underline-offset:3px}
.wrap{width:min(860px,calc(100% - 32px));margin:0 auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:3px solid #2997ff;outline-offset:2px;border-radius:8px}

/* Menyn: ljus och halvgenomskinlig med en tunn kant, som på sajten. Admin har sin violetta (.top.staff). */
.top{position:sticky;top:0;z-index:20;background:var(--top-bg);-webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);color:var(--top-ink);border-bottom:1px solid var(--hair)}
.bar{display:flex;align-items:center;gap:16px;min-height:52px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--top-ink);text-decoration:none;font-size:20px;font-weight:700;letter-spacing:-.035em}
.brand .mark{width:28px;height:28px;border-radius:8px;box-shadow:0 5px 14px -6px rgba(58,47,143,.55);transition:transform .3s var(--ease)}
.brand:hover .mark{transform:rotate(-6deg) scale(1.05)}
.wordmark{font-weight:600;letter-spacing:-.045em}.wordmark b{font-weight:600;color:var(--ctl)}  /* "ctl" in the robots' violet, as on sharectl.com */
nav{display:flex;gap:2px;margin-left:auto;padding:2px;border-radius:999px;background:var(--top-pill)}  /* with Hjälp's auto margin: centred between the logo and the icons */
nav button{background:none;color:var(--top-muted);border:0;padding:5px 12px;border-radius:999px;font:500 13px var(--font);cursor:pointer;transition:color .2s,background-color .2s}
nav button:hover{color:var(--top-ink);background:none}
nav button.on{background:var(--paper);color:var(--top-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.top button.ghost,.ghost-link{margin-left:auto;color:var(--top-muted);background:none;border:0;padding:5px 0;font:500 13px var(--font);text-decoration:none;cursor:pointer}
.top button.ghost:hover,.ghost-link:hover{color:var(--top-ink);background:none}

/* Knappar och fält */
button{font:500 15px var(--font);background:var(--action);color:var(--on-action);border:0;border-radius:999px;padding:9px 20px;cursor:pointer;transition:background-color .2s,transform .1s}
button:hover{background:var(--action-hover)}
button:active{transform:scale(.98)}
button:disabled{opacity:.45;cursor:default;transform:none}
button.ghost{background:transparent;color:var(--link);padding:9px 4px}
button.ghost:hover{background:transparent;text-decoration:underline}
label{display:block;font-size:14px;font-weight:600;margin:16px 0 6px}
label .muted{font-weight:400}
input,textarea,select{width:100%;font:17px var(--font);padding:11px 14px;border:1px solid var(--hair);border-radius:12px;background:var(--field);color:var(--ink);transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px var(--top-hover)}
textarea{resize:vertical}
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b91' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:40px;cursor:pointer}  /* one chevron in every browser and theme */
form button[type=submit]{margin-top:18px}
.row{display:flex;gap:10px;align-items:center}.row input,.row select{flex:1;margin:0}.row button{margin-top:0!important;white-space:nowrap}

/* Sidor */
main{padding:40px 0 80px}
h1{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.03em;margin:0 0 6px}
h2{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.card{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);padding:24px 26px;margin:0 0 20px}
.card>p+p,.card>p+form{margin-top:10px}
.narrow{max-width:440px;margin:48px auto;text-align:center;padding-top:8px}
.narrow form{text-align:left}
.narrow p{color:var(--graphite)}
.narrow p.error{color:var(--bad)}
.narrow button{margin-top:18px}
.muted{color:var(--graphite)}.small{font-size:13px}
.error{color:var(--bad);font-weight:500}.note{margin:12px 0 0;font-size:15px;font-weight:500}.note.ok{color:var(--ok)}.note.bad{color:var(--bad)}
.status-line{font-weight:500}

/* Roboten */
.mascot{display:block;width:96px;height:112px;margin:0 auto 14px;overflow:visible;--line:var(--bot-line)}  /* outlines visible in both themes */
.eyes,.logo-eye{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .eyes,.logo-eye{animation:blink 4.6s infinite}
  .wave-arm{transform-box:view-box;transform-origin:78px 66px;animation:wave 2.4s var(--ease) infinite}
}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@keyframes wave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-14deg)}80%{transform:rotate(6deg)}90%{transform:rotate(-8deg)}}

/* Filter som segmentväljare */
.filters{display:flex;gap:2px;padding:2px;border-radius:999px;background:var(--hair-soft)}
.filters button{background:none;color:var(--muted-strong);padding:5px 14px;font-size:13px}
.filters button:hover{background:none;color:var(--ink)}
.filters button.on{background:var(--raised);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* Listor: en grupp vita rader, som i Inställningar på iPhone */
.list{list-style:none;padding:0;margin:0;background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.card .list{border:0;border-radius:12px;background:var(--inset)}
.item{position:relative;padding:16px 22px;border-top:1px solid var(--hair-soft)}
.item:first-child{border-top:0}
.item.new::before{content:"";position:absolute;left:8px;top:23px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.item h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em}
.item p{margin:4px 0 0}
.item .row{margin-top:12px}
.meta{color:var(--graphite);font-size:14px}
.chip{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--chip-bg);color:var(--chip-fg);white-space:nowrap}
.chip.new{background:var(--chip-new-bg);color:var(--chip-new-fg)}.chip.handled{background:var(--chip-ok-bg);color:var(--chip-ok-fg)}.chip.urgent{background:var(--chip-bad-bg);color:var(--chip-bad-fg)}
.chip.none{background:var(--hair-soft);color:var(--muted-strong)}
.chip.warn{background:color-mix(in srgb,var(--amber) 18%,transparent);color:color-mix(in srgb,var(--amber) 50%,var(--ink))}
.empty{padding:36px 24px 30px;text-align:center;color:var(--graphite);background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius)}
.empty p{max-width:30ch;margin:0 auto}
.empty-bot{display:block;width:78px;height:89px;margin:0 auto 14px;overflow:visible;--line:var(--bot-line)}

/* Ett samtal */
.back{display:inline-flex;align-items:center;gap:4px;margin:0 0 14px;padding:7px 15px 7px 9px;border-radius:999px;background:var(--inset);color:var(--ink);font:500 15px var(--font);transition:background-color .2s}
.back:hover{background:var(--secondary-hover)}
.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.back:hover svg{transform:translateX(-2px)}
.transcript{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:3px}
.transcript li{position:relative;padding:9px 14px;border-radius:20px;max-width:min(78%,520px);font-size:16px;line-height:1.4}
.transcript li.first{margin-top:12px}.transcript li:first-child{margin-top:0}
.transcript .agent{margin-left:36px;background:var(--inset);border-top-left-radius:8px;border-bottom-left-radius:8px}
.transcript .agent.first{border-top-left-radius:20px}.transcript .agent.last{border-bottom-left-radius:6px}
.transcript .caller{margin-left:auto;background:linear-gradient(135deg,#7c5cff,#5b3ff0);color:#fff;border-top-right-radius:8px;border-bottom-right-radius:8px}
.transcript .caller.first{border-top-right-radius:20px}.transcript .caller.last{border-bottom-right-radius:6px}
.transcript .turn-av{position:absolute;left:-36px;bottom:0;width:28px;height:28px;border-radius:8px;box-shadow:0 4px 10px -5px rgba(58,47,143,.6)}
.transcript b{display:block;font-size:12px;font-weight:600;opacity:.7}

/* Inställningar */
.line-form h2 .num{display:inline-block;color:var(--graphite);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}  /* the number on one line, never broken */
.preview{background:var(--inset);border-radius:12px;padding:12px 14px;margin-top:16px}
.preview p{margin:2px 0 0}
.preview.result{margin-top:10px}.preview.result>span{color:var(--graphite);font-weight:500}.preview.result>p:not(.meta){font-size:17px;line-height:1.45}
.preview.result.ok{background:var(--chip-ok-bg)}.preview.result.ok>span{color:var(--chip-ok-fg)}
.preview.result.bad{background:var(--chip-bad-bg)}.preview.result.bad>span{color:var(--chip-bad-fg)}
.preview.result.warn{background:color-mix(in srgb,var(--amber) 14%,transparent)}.preview.result.warn>span{color:color-mix(in srgb,var(--amber) 50%,var(--ink))}

/* Admin: samma sida, violett märke och robot med bygghjälm */
.top.staff{background:rgba(25,23,54,.92);border-bottom:0;--top-ink:#ffffff;--top-muted:#d2d2d7;--top-pill:rgba(255,255,255,.1);--top-hover:rgba(255,255,255,.12)}
.top.staff nav button.on{background:#fff;color:#1d1d1f;box-shadow:none}
/* Admin between phone and desktop: the five tabs and the icons do not share a row, so the tabs get their own,
   as on a phone, instead of the account button wrapping alone */
@media (min-width:641px) and (max-width:780px){.top.staff .bar{gap:12px;padding:6px 0}.top.staff nav{order:3;flex-basis:100%;margin-left:0;justify-content:center}}

@media (max-width:640px){
  .bar{gap:12px;padding:6px 0}
  /* Five tabs do not fit at 375 px: the menu scrolls sideways on its own, never the page (portal-core.js show() keeps the open tab in view) */
  nav{order:3;flex-basis:100%;min-width:0;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav button{flex:1 0 auto;padding:6px 7px}
  h1{font-size:28px}
  .card{padding:20px}
  .item{padding:14px 18px}
  .row{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.narrow form button{width:100%}

/* Meddelanden grupperade per dag */
.day{font-size:15px;font-weight:600;color:var(--graphite);letter-spacing:-.01em;margin:26px 0 8px 6px}
.day:first-child{margin-top:0}
/* Hover: a clearer background, a thin bar on the left and an arrow that slides in, so the row reads as one to open */
.row-link{position:relative;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.row-link:hover,.row-link:has(.row-open:focus-visible){background:var(--row-hover);box-shadow:inset 3px 0 0 var(--ink)}
/* A message or a task: title over message on the left; chip, time with arrow and delete in columns of their own */
.item.msg{display:grid;grid-template-columns:minmax(0,1fr) auto auto 44px;grid-template-areas:"title chip when bin" "sub sub sub .";
  column-gap:12px;align-items:center;padding-right:10px}
.msg h3{grid-area:title;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .chips{grid-area:chip;justify-self:end;display:flex;gap:6px}
.msg .when{grid-area:when;justify-self:end;display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.msg .subject{grid-area:sub}
.msg .icon-btn{grid-area:bin;margin:-11px 0}  /* on the title's line, without making it taller */
/* The arrow is there on every row, hidden, so the times line up whether or not the row opens */
.msg .when::after{content:"";width:7px;height:7px;border-top:2px solid var(--graphite);border-right:2px solid var(--graphite);
  transform:translateX(-4px) rotate(45deg);opacity:0;transition:opacity .15s,transform .2s var(--ease)}
.row-link:hover .when::after,.row-link:has(.row-open:focus-visible) .when::after{opacity:1;transform:translateX(0) rotate(45deg)}
@media (hover:none){.row-link .when::after{opacity:.5;transform:rotate(45deg)}}
/* On a phone the chip moves down in front of the message, so the name keeps its room */
@media (max-width:640px){
  .item.msg{grid-template-columns:auto minmax(0,1fr) auto 44px;grid-template-areas:"title title when bin" "chip sub sub .";column-gap:0}
  .msg .when{margin-left:10px}
  .msg .chips{justify-self:start}
  .msg .chips:not(:empty){margin:4px 8px 0 0}
}
.row-open{all:unset;cursor:pointer}
.row-open:hover{background:none}  /* not the general button hover: the row shows it */
.row-open:focus-visible{outline:none}
.row-link:has(.row-open:focus-visible){outline:3px solid #2997ff;outline-offset:-3px}
.item .subject{color:var(--graphite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item:not(.new) h3{font-weight:500}
.item.new .subject{color:var(--ink)}
button.danger{display:inline-flex;align-items:center;gap:8px;margin:28px 0 0;background:var(--danger-soft);color:var(--bad);padding:9px 16px;font-size:15px}
button.danger:hover{background:var(--danger-soft-hover)}
.trash,.glyph{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;margin:-6px 0;padding:0;border-radius:50%;background:none;color:var(--graphite)}
.icon-btn .trash{width:20px;height:20px}
.icon-btn:hover{background:var(--danger-soft);color:var(--bad)}
.icon-btn:active{transform:scale(.92)}
@media (hover:hover){.msg .icon-btn{opacity:0;transition:opacity .15s,background-color .15s,color .15s}.msg:hover .icon-btn,.msg:focus-within .icon-btn{opacity:1}}

/* Den låsta AI-meningen i förhandsvisningen */
mark.locked{background:var(--mark);color:var(--ink);border-radius:6px;padding:1px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.legal-note{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--hair);font-size:13px;line-height:1.45;color:var(--graphite)}
.lock{width:16px;height:16px;flex:none;margin-top:1px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Bekräftelseruta för att ta bort */
dialog.sheet{width:min(360px,calc(100% - 32px));border:0;border-radius:22px;padding:0;text-align:center;color:var(--ink);
  background:var(--paper);box-shadow:var(--sheet-shadow)}
dialog.sheet>form{padding:28px 24px 20px}
dialog.sheet::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:var(--danger-soft);color:var(--bad)}
.sheet-icon .trash,.sheet-icon .glyph{width:26px;height:26px}
dialog.sheet h2{font-size:20px;margin:0 0 8px}
dialog.sheet p{margin:0;font-size:15px;color:var(--graphite)}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.sheet-actions button{padding:11px 16px;font-size:16px}
button.secondary{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}  /* the site's white pill */
button.secondary:hover{background:var(--mist)}
button.destructive{background:var(--bad);color:var(--on-bad)}
button.destructive:hover{background:var(--danger-strong)}
@media (prefers-reduced-motion:no-preference){
  dialog.sheet[open]{animation:sheet-in .22s var(--ease)}
  dialog.sheet[open]::backdrop{animation:fade-in .22s ease}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.lead{margin:2px 0 0;color:var(--graphite);font-size:15px}
/* Abonnemang: the customer's own number, the thing they forward to */
.my-number{display:flex;flex-direction:column;gap:2px;margin:18px 0 4px}
.my-number .big{font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Ring upp */
.call-btn{display:inline-flex;align-items:center;gap:8px;margin:14px 0 4px;padding:10px 20px;border-radius:999px;background:var(--action);color:var(--on-action);font-size:16px;font-weight:500;text-decoration:none;transition:background-color .2s}
.call-btn:hover{background:var(--action-hover)}
.handset{width:18px;height:18px;fill:currentColor;flex:none}

/* Kom igång och vidarekoppling */
.start h2{font-size:22px}
.code-row{display:flex;align-items:center;gap:10px;margin:14px 0 10px;padding:8px 8px 8px 16px;border-radius:14px;background:var(--inset)}
.code{flex:1;font:600 18px var(--mono);letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere}
.code-row button{padding:7px 14px;font-size:14px}
.call-hint{display:flex;align-items:center;gap:12px;margin:-2px 0 10px;padding:10px 14px;border-radius:14px;background:var(--chip-ok-bg)}
.call-hint .call-text{margin:0;line-height:1.35}.call-hint b{display:block;color:var(--chip-ok-fg)}.call-hint span:not(.call-dot){font-size:14px;color:var(--graphite)}
.call-dot{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#30d158;color:#fff}.call-dot svg{width:19px;height:19px}

/* Antal olästa på fliken */
nav button .count{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}
nav button .count.ok{background:var(--ok)}
nav button .count.tick{display:inline-grid;place-items:center;padding:0}
nav button .count.tick svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
nav button .count.bad{background:var(--bad)}
#start-tab{white-space:nowrap}
.help-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.help-links:empty{display:none}

/* Abonnemang och användning */
.stat{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--hair-soft)}
.stat:first-of-type{border-top:0}
.stat-value{color:var(--graphite);font-variant-numeric:tabular-nums}
.stat.total{font-weight:600}.stat.total .stat-value{color:var(--ink)}

/* Röstval */
fieldset.voices{border:0;padding:0;margin:20px 0 0}
fieldset.voices legend{font-size:14px;font-weight:600;padding:0;margin-bottom:8px}
.voice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.voice{display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px;border:1px solid var(--hair);border-radius:14px;font-weight:400;cursor:pointer;transition:border-color .15s,background-color .15s}
.voice:hover{border-color:var(--hair-strong)}
.voice:has(input:checked){border-color:var(--action);background:var(--selected);box-shadow:0 0 0 1px var(--action)}
.voice input{width:auto;margin:0;accent-color:var(--action)}
.voice-text{display:grid;flex:1;line-height:1.3}
.voice-text .meta{font-size:13px}
.voice .play{padding:5px 12px;font-size:13px;background:var(--hair-soft);color:var(--ink)}
.voice .play:hover{background:var(--secondary-hover)}
.voice-help{margin:-4px 0 10px}

/* Headings that receive focus when a view opens */
h1[tabindex="-1"]:focus{outline:none}

/* Fler vidarekopplingskoder, hopfällda */
details.more-codes{margin-top:14px;border-top:1px solid var(--hair-soft);padding-top:12px}
details.more-codes summary{cursor:pointer;color:var(--link);font-size:15px;font-weight:500;list-style:none}
details.more-codes summary::-webkit-details-marker{display:none}
details.more-codes summary::before{content:"›";display:inline-block;width:14px;transition:transform .15s}
details.more-codes[open] summary::before{transform:rotate(90deg)}
/* Uppdrag: the rules every task call keeps, folded under the heading. */
.task-rules{margin:0 0 16px}
.task-rules ul{margin:8px 0 0;padding-left:20px;color:var(--graphite);font-size:15px}
.task-rules li{margin:4px 0}
.code-list{display:grid;gap:14px;margin-top:12px}
.code-label{margin:0;font-size:14px;font-weight:600}
.code-item .code-row{margin:6px 0 4px}
.code-item .small{margin:0}
.code-item .code{font-size:15px}

/* Vidarekoppling per operatör: väljaren och det som inte är bekräftat */
.fwd-label{margin:16px 0 6px}
.fwd-pick{max-width:340px}
.fwd-body>p.small,.fwd-body>.note{margin:8px 0 0}
.fwd-body>.small:first-child{margin-top:10px}
.fwd-body>.code-label{margin-top:16px}
.fwd-steps{list-style:none;counter-reset:fwd;margin:18px 0 16px;padding:0;display:grid;gap:18px}
.fwd-steps>li{counter-increment:fwd;position:relative;padding-left:40px}
.fwd-steps>li::before{content:counter(fwd);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--chip-bg);color:var(--chip-fg);font-weight:700;font-size:15px;display:grid;place-items:center}
.fwd-steps h3{margin:0 0 8px;font-size:17px}
.fwd-steps p{margin:6px 0 0}
.fwd-steps .start-how-dial{margin-top:0}
.fwd-secs{display:flex;flex-wrap:wrap;gap:8px}
.fwd-sec{min-width:52px;padding:10px 0;border-radius:12px;border:1px solid var(--hair-soft);background:var(--inset);color:inherit;font-size:17px;font-weight:600;cursor:pointer}
.fwd-sec:hover{background:var(--row-hover)}
.fwd-sec.on,.fwd-sec.on:hover{background:var(--ctl);border-color:var(--ctl);color:#fff}
.fwd-unsure{padding:10px 14px;border-radius:12px;border-left:3px solid var(--amber);background:var(--inset);font-size:14px;font-weight:400;color:var(--graphite)}
.start-how-dial{margin-top:18px}
.start-forward.no-phone{grid-template-columns:minmax(0,1fr)}

/* Utseende i menyraden */
.theme-btn{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:auto;padding:0;border-radius:50%;background:none;color:var(--top-muted)}
.theme-btn:hover{background:var(--top-hover);color:var(--top-ink)}
.theme-btn+button.ghost,.theme-btn+.ghost-link,.ghost-link+button.ghost{margin-left:0}
.theme-ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Admin: dagens läge och kundkort */
.overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:0 0 20px}
.tally{background:var(--paper);border:1px solid var(--hair);border-radius:14px;padding:12px 16px;font-size:13px;line-height:1.3;color:var(--graphite)}
.tally b{display:block;margin-bottom:2px;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.tally.bad b{color:var(--bad)}
.meta.bad{color:var(--bad)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.actions button{padding:7px 14px;font-size:14px}
.edit{margin-top:14px;padding-top:4px;border-top:1px solid var(--hair-soft)}
.edit h3{margin:12px 0 0}
label.check{display:flex;align-items:baseline;gap:8px;font-weight:500}
label.check input{width:auto;margin:0}
label.check.toggle{align-items:center;gap:12px;cursor:pointer}
label.check.toggle input{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px;height:31px;padding:0;border:0;border-radius:999px;background:var(--hair-strong);cursor:pointer;transition:background-color .25s}
label.check.toggle input::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2),0 0 1px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
label.check.toggle input:checked{background:var(--switch-on)}
label.check.toggle input:checked::before{transform:translateX(20px)}
label.check.toggle input:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--switch-on) 30%,transparent)}

/* Sparraden under inställningarna: säger alltid om något är osparat */
.save-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;padding:14px 26px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--paper)}
.save-bar button[type=submit]{margin:0;white-space:nowrap}
.save-state{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:500;color:var(--ink)}
.save-state .tick{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:none}
.save-state.ok{color:var(--ok)}.save-state.ok .tick{display:block}
.save-bar.dirty{position:sticky;bottom:12px;z-index:2;box-shadow:0 6px 24px rgba(0,0,0,.16)}
/* After a deploy, on a page whose files are older (common.js): a quiet bar at the top with a reload button. */
.update-bar{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 12px);transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:999px;background:var(--raised);color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:15px}
.update-bar button{padding:6px 14px;font-size:14px;flex:none}
.choice-list{display:grid;gap:8px}
.greeting-choice textarea{margin-top:8px}
.field-help{margin:6px 0 0}
.line-form .note{margin:-8px 0 20px}
.voice-card fieldset.voices{margin:0}.voice-card fieldset.voices legend{font-size:19px;letter-spacing:-.02em;margin-bottom:8px}

/* Inställningar: en yta i taget under flikar */
.seg{display:flex;gap:4px;padding:4px;margin:0 0 16px;border-radius:999px;background:var(--hair-soft);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;padding:8px 14px;font-size:14px;background:transparent;color:var(--ink);border-radius:999px}
.seg button:hover{background:var(--secondary-hover)}
.seg button[aria-selected=true]{background:var(--paper);box-shadow:0 1px 4px rgba(0,0,0,.12)}
#v-settings [data-panel].off{display:none}

/* Logga in med Google, enligt Googles riktlinjer för knappen: vit med grå kant i ljust läge, nästan svart i mörkt,
   Googles färgade G till vänster. Länk i stället för knapp, så den fungerar även innan skriptet har laddat. */
.gsi{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:40px;margin:18px 0 0;padding:0 12px;
  background:#fff;color:#1f1f1f;border:1px solid #747775;border-radius:999px;font:500 14px/20px var(--font);letter-spacing:.25px;
  text-decoration:none;transition:background-color .2s,box-shadow .2s}
.gsi svg{width:20px;height:20px;flex:none}
.gsi:hover{background:#f7f8f8;box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.gsi:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.gsi:active{background:#eef0f1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gsi{background:#131314;color:#e3e3e3;border-color:#8e918f}
  :root:not([data-theme="light"]) .gsi:hover{background:#1f1f21;box-shadow:none}}
:root[data-theme="dark"] .gsi{background:#131314;color:#e3e3e3;border-color:#8e918f}
:root[data-theme="dark"] .gsi:hover{background:#1f1f21;box-shadow:none}
.narrow p.gsi-or{margin:20px 0 0;font-size:15px}

/* Hjälp och felsökning (common.js): knappen i menyraden öppnar ett blad, samma i portalen och admin. */
.help-btn{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:auto;padding:0;border-radius:50%;background:none;color:var(--top-muted)}
.help-btn:hover{background:var(--top-hover);color:var(--top-ink)}
.help-btn+.theme-btn{margin-left:0}

/* The account button in the menu bar (common.js): the first letter, and a small menu with Logga ut. */
.account{position:relative;flex:none}
.account-btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;background:#47e5b5;color:#191736;font:700 14px var(--font)}
.account-btn:hover{background:#6aedc6}
.account-btn:focus-visible,.help-btn:focus-visible{outline:3px solid #2997ff;outline-offset:2px}
.account-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:30;min-width:220px;max-width:min(320px,calc(100vw - 32px));padding:14px 0 6px;border-radius:14px;background:var(--raised);color:var(--ink);box-shadow:0 12px 32px rgba(0,0,0,.22)}
.account-menu[hidden]{display:none}
.account-menu p{margin:0;padding:0 16px;overflow-wrap:anywhere}
.account-email{font-size:15px;font-weight:600}
.account-name{margin-top:2px!important;font-size:13px;color:var(--graphite)}
.account-logout{display:block;width:100%;margin-top:10px;padding:10px 16px;border-top:1px solid var(--hair-soft);border-radius:0;background:none;color:var(--bad);font-size:15px;text-align:left}
.account-logout:hover{background:var(--row-hover)}
.account-lang{display:flex;gap:2px;margin:12px 16px 0;padding:2px;border-radius:999px;background:var(--hair-soft)}
.account-lang button{flex:1;padding:5px 10px;border-radius:999px;background:none;color:var(--muted-strong);font-size:13px}
.account-lang button[aria-pressed=true]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.lang-switch{margin:18px 0 0;text-align:center}
.biz-badge{margin-left:2px;padding:2px 8px;border-radius:999px;background:var(--chip-bg);color:var(--chip-fg);font-size:12px;font-weight:600;letter-spacing:0}
.biz-badge[hidden]{display:none}
.ov-stat.warn b{color:var(--orange)}
.ch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
@media(max-width:980px){.ch-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ch-grid{grid-template-columns:1fr}}
.ch-card{display:grid;gap:8px;align-content:start;margin:0}
.ch-card p{margin:0}
.ch-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ch-head h2{margin:0}
.ov-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:820px){.ov-stats{grid-template-columns:repeat(2,1fr)}}
.ov-stat{display:grid;gap:2px;padding:18px;margin:0}
.ov-stat b{font-size:34px;letter-spacing:-.03em;line-height:1}
.ov-stat span{color:var(--graphite);font-size:14px}
.ov-stat a{font-size:13px;color:var(--link);margin-top:6px}
.ov-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ov-two>.card{min-width:0}
@media(max-width:820px){.ov-two{grid-template-columns:1fr;gap:0}}
.ov-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:150px;margin-top:14px}
.ov-day{display:grid;grid-template-rows:1fr auto;gap:6px;text-align:center}
.ov-bar{display:flex;flex-direction:column;justify-content:flex-end;border-radius:8px;background:var(--mist);overflow:hidden}
.ov-bar i{display:block;width:100%}
.ov-bar .got{background:var(--accent)}
.ov-bar .need{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.ov-day small{color:var(--graphite);font-size:12px}
.ov-dl{display:grid;gap:10px;margin:14px 0 0}
.ov-dl div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--hair-soft);padding-top:10px}
.ov-dl div:first-child{border-top:0;padding-top:0}
.ov-dl dt{color:var(--graphite)}
.ov-dl dd{margin:0;text-align:right;overflow-wrap:anywhere}
.chat-form{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;margin:14px 0 6px}
.chat-form label:not(.check){display:grid;gap:4px;max-width:160px}
.chat-form button{margin:0}
.chat-h{margin:18px 0 4px;font-size:15px}
.account-switch{margin-top:10px;border-top:1px solid var(--hair-soft);padding-top:4px}
.account-switch button{display:block;width:100%;padding:8px 16px;border:0;background:none;color:var(--link);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.account-switch button:hover{background:var(--row-hover)}
.account-switch button[aria-current]{color:var(--ink);font-weight:600;cursor:default}
dialog.help-sheet{width:min(560px,calc(100% - 32px));max-height:min(720px,calc(100% - 48px));text-align:left;overflow:auto}
dialog.help-sheet>form{padding:24px 24px 18px}
dialog.help-sheet h3{font-size:15px;font-weight:600;margin:18px 0 0}
dialog.help-sheet h2+h3{margin-top:6px}
dialog.help-sheet details.more-codes{margin-top:10px;padding-top:10px}
dialog.help-sheet details p{margin:8px 0 0 14px}
dialog.help-sheet code{font-family:var(--mono);font-size:.88em;background:var(--inset);padding:1px 5px;border-radius:6px;overflow-wrap:anywhere}
dialog.help-sheet .sheet-actions{margin-top:20px;grid-template-columns:1fr}

/* Kom igång above the inbox (start.js): three steps that tick themselves off. */
.start-box{margin:0 0 24px}
.start-head{display:flex;align-items:center;gap:20px;margin:0 0 16px}
.start-bot{flex:none;width:72px;height:84px;overflow:visible;--line:var(--bot-line)}
.start-head>div{flex:1;min-width:0}
.start-head h2{margin:0 0 2px;font-size:24px}
.start-head p{margin:0}
.start-progress{height:8px;max-width:320px;margin:10px 0 6px;border-radius:999px;background:var(--hair-soft);overflow:hidden}
.start-progress span{display:block;height:100%;width:0;border-radius:inherit;background:var(--ok);transition:width .5s var(--ease)}
.start-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.start-step{background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.start-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;padding:18px 22px;cursor:pointer;text-align:left}
.start-row:hover{background:var(--row-hover)}
.start-row:focus-visible{outline:3px solid #2997ff;outline-offset:-3px}
.start-check{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--hair);color:var(--graphite);font-size:15px;transition:background-color .3s,border-color .3s}
.start-check svg{display:none;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.start-step.done .start-check{background:var(--ok);border-color:var(--ok)}
.start-step.done .start-check b{display:none}
.start-step.done .start-check svg{display:block}
.start-text{flex:1;min-width:0}
.start-title{display:block;font-size:18px;font-weight:600;letter-spacing:-.015em}
.start-sub{display:block;margin-top:2px;font-size:14px;color:var(--graphite)}
.start-step.done .start-sub{color:var(--ok)}
.start-chev{width:18px;height:18px;flex:none;fill:none;stroke:var(--graphite);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.start-step.open .start-chev{transform:rotate(90deg)}
.start-body{display:none;padding:0 22px 22px 72px}
.start-step.open .start-body{display:block}
.start-body h3{margin:0 0 10px;font-size:17px}
.start-body .code-row{max-width:520px}
.start-mini{margin:0 0 8px;padding-left:22px;line-height:1.7}
.start-mail{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:420px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--inset);font-size:13px}
.start-mail-from{display:flex;align-items:center;gap:8px;min-width:0}
.start-mail-from span:last-child{color:var(--graphite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.start-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent)}
.start-mail-btn{flex:none;padding:5px 12px;border-radius:999px;background:var(--action);color:var(--on-action);font-weight:600}
.start-forward{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start}
.start-phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.start-phone>button{font-size:14px;padding:4px 8px}
.start-screen{position:relative;width:200px;height:372px;padding:44px 18px 18px;border-radius:34px;background:#0b0b0d;border:6px solid #2c2c2e;box-shadow:0 10px 30px rgba(0,0,0,.18);color:#fff;overflow:hidden}
.start-screen::before{content:"";position:absolute;top:10px;left:50%;width:62px;height:18px;margin-left:-31px;border-radius:999px;background:#000}
.start-typed{display:flex;justify-content:center;align-items:center;height:38px;margin-bottom:12px;font:500 14px var(--font);white-space:nowrap;overflow:hidden}
.start-typed::after{content:"";width:2px;height:20px;margin-left:2px;background:#47e5b5;animation:start-caret 1s steps(1) infinite}
@keyframes start-caret{50%{opacity:0}}
.start-pad{display:grid;grid-template-columns:repeat(3,44px);justify-content:center;gap:9px 14px}
.start-key{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#333336;font:400 20px var(--font);transition:background-color .12s}
.start-key.press{background:#8e8e93}
.start-call{display:grid;place-items:center;width:48px;height:48px;margin:12px auto 0;border-radius:50%;background:#30d158;color:#fff;transition:transform .15s,filter .15s}
.start-call svg{width:22px;height:22px}
.start-call.press{transform:scale(.9);filter:brightness(1.3)}
.start-carrier{position:absolute;left:14px;right:14px;top:120px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px 0;border-radius:18px;background:rgba(58,58,60,.97);text-align:center;font-size:13px;animation:start-rise .35s var(--ease)}
.start-carrier[hidden]{display:none}
.start-carrier svg{width:26px;height:26px;fill:none;stroke:#30d158;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.start-carrier span{color:#d2d2d7}
.start-carrier .start-ok{align-self:stretch;margin-top:10px;padding:10px 0;border-top:1px solid #545458;color:#64d2ff;font-weight:600}
@keyframes start-rise{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.start-dial{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;background:#30d158;color:#fff;font-size:18px;font-weight:600;text-decoration:none}
.start-dial svg{width:22px;height:22px}
.start-wait{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;border-radius:14px;background:var(--inset);font-size:14px;color:var(--graphite)}
.start-pulse{flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent);animation:start-pulse 1.6s var(--ease) infinite}
@keyframes start-pulse{0%{box-shadow:0 0 0 0 rgba(106,77,255,.45)}70%{box-shadow:0 0 0 9px rgba(106,77,255,0)}100%{box-shadow:0 0 0 0 rgba(106,77,255,0)}}
.start-wait.ok{background:var(--chip-ok-bg);color:var(--chip-ok-fg);font-weight:500}
.start-wait.ok .start-pulse{animation:none;background:var(--ok)}
.start-body .seg,.start-ai .seg{max-width:520px}
.start-try{margin-top:22px!important}
.start-prompt-text{flex:1;font-size:15px;color:var(--ink)}
.start-chat{max-width:520px;margin:14px 0 0;border-radius:16px;background:var(--inset);overflow:hidden}
.start-chat-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--hair-soft);font-size:13px}
.start-chat-bar span{width:9px;height:9px;border-radius:50%;background:var(--hair)}
.start-chat-bar b{margin-left:8px;font-weight:600}
.start-chat-body{display:flex;flex-direction:column;gap:8px;min-height:150px;padding:14px}
.start-bubble{max-width:85%;margin:0;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.4}
.start-bubble.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.start-bubble.me:empty{display:none}
.start-bubble.ai{align-self:flex-start;background:var(--paper);border-bottom-left-radius:5px}
.start-tool{align-self:flex-start;margin:0;padding:4px 10px;border-radius:999px;background:var(--paper);font:500 12px var(--mono);color:var(--graphite)}
.start-chat .start-tool,.start-chat .start-bubble.ai{display:none}
.start-chat.s2 .start-tool,.start-chat.s3 .start-tool{display:inline-block;animation:start-rise .35s var(--ease)}
.start-chat.s3 .start-bubble.ai{display:block;animation:start-rise .35s var(--ease)}
.start-step.just-done .start-check{animation:start-pop .5s var(--ease)}
@keyframes start-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@media (max-width:640px){
  .start-head{gap:14px}
  .start-bot{width:56px;height:66px}
  .start-row{padding:16px}
  .start-body{padding:0 16px 18px}
  .start-forward{grid-template-columns:1fr;gap:18px}
}
@media (prefers-reduced-motion:reduce){.start-typed::after,.start-pulse{animation:none}}

/* Admin: the customer list. One row per customer that opens to its facts and actions. */
.find{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.find input{flex:1 1 240px;width:auto;font-size:16px;padding:9px 14px}
/* Inkorg: search folded into a magnifier beside Alla and Olästa, the same pill; it opens to a field */
.inbox-tools{display:flex;align-items:center;gap:8px}
.inbox-tools[hidden]{display:none}
.search-pill{display:flex;align-items:center;height:32px;padding:2px;border-radius:999px;background:var(--hair-soft)}
.search-pill button{display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%;background:none;color:var(--muted-strong)}
.search-pill button:hover{background:none;color:var(--ink)}
.search-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-pill input{width:0;min-width:0;margin:0;padding:0;border:0;background:none;box-shadow:none;font-size:14px;outline:none;opacity:0;
  transition:width .2s var(--ease),padding .2s var(--ease),opacity .15s}
.search-pill.open{background:var(--raised);box-shadow:inset 0 0 0 1px var(--hair)}
.search-pill.open:focus-within{box-shadow:inset 0 0 0 2px #2997ff}
.search-pill.open input{width:190px;padding:0 10px 0 2px;opacity:1}
.search-pill input::-webkit-search-cancel-button{cursor:pointer}
@media (max-width:640px){.search-pill.open input{width:min(186px,48vw)}}
/* The cost column and the header row that names the columns; admin is wider than the portal to fit them */
.top.staff .wrap,.staff~#main{width:min(1680px,calc(100% - 32px))}

/* Abonnemang med Stripe: planerna, samtyckesrutan och köpknapparna (portal-billing.js payments). */
.plans{display:grid;gap:8px;margin:10px 0 0}
.plan{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--inset)}
.plan>div{display:flex;flex-direction:column;gap:2px}
label.consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:15px;font-weight:400}
label.consent input{width:auto;margin-top:3px;flex:none;accent-color:var(--action)}
.narrow label.consent{text-align:left;color:var(--ink)}
#minute-balance>button{margin-top:16px}
#minute-balance>button+p{margin-top:6px}

/* Admin: Översikt (admin-dash.js). Two series, validated for both themes: inbound blue, outbound orange. */
:root{--series-in:#0071e3;--series-out:#e8590c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--series-in:#3b8ef0;--series-out:#e26a1f}}
:root[data-theme="dark"]{--series-in:#3b8ef0;--series-out:#e26a1f}
.top.staff nav button{white-space:nowrap}
.key{display:inline-block;width:10px;height:10px;border-radius:3px}
.key.in,.seg-in{background:var(--series-in)}
.key.out,.seg-out{background:var(--series-out)}

/* Översikt as a dashboard: white cards without borders on a tinted shell, large figures, chips for change. Cost
   parts wear the data-viz reference palette's first four slots (validated light and dark, amounts always beside). */
.col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;outline:0;cursor:default}
.mini{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:16px;background:var(--inset)}
.mini b{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pill.flat{background:var(--inset);color:var(--graphite)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.pill.ok{background:var(--chip-ok-bg);color:var(--chip-ok-fg)}.pill.bad{background:var(--chip-bad-bg);color:var(--chip-bad-fg)}
.pill.warn{background:#fff3d6;color:#7a5200}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.warn{background:#3d2e0a;color:#ffd27a}}
:root[data-theme="dark"] .pill.warn{background:#3d2e0a;color:#ffd27a}
.share b{display:block;margin:4px 0 8px;font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%}.dot.bad{background:var(--bad)}
.ticks{display:flex;gap:2px;height:28px}
.ticks span{flex:1;border-radius:2px;background:currentColor;opacity:.18}.ticks span.on{opacity:1}
.alert{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 4px;border-radius:10px}
button.alert{cursor:pointer}button.alert:hover{background:var(--row-hover)}button.alert:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.alert .dot{margin-top:7px}
.alert b{display:block;font-size:14px;font-weight:600}.alert span{display:block;font-size:13px;color:var(--bad)}

/* The banner while new calls are paused (portal-billing.js checkPause): under the menu on every page. */
.pause-banner{background:var(--chip-bad-bg);color:var(--chip-bad-fg);border-bottom:1px solid var(--hair);font-size:15px;font-weight:500}
.pause-banner .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 0}
.pause-banner svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pause-banner span{flex:1;min-width:200px}
.pause-banner a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Konto: deleting the account sits apart, with a red edge, below the download. */
.danger-zone{border-color:var(--chip-bad-bg)}
.danger-zone h2{color:var(--bad)}
.danger-zone form button{margin-top:14px}

/* Admin: a customer opens in a panel from the right, and the list stays beside it. On a wide screen the page moves
   left to make room; on a phone the panel covers the screen. */
@keyframes panel-in{from{transform:translateX(28px);opacity:0}}

/* Mobilen: portalens flikar som en fast rad längst ner, med ikoner, som i en app. Admin behåller raden i toppen. */
nav button[data-tab="start"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.3 5.2 5.2 2.3-5.2 2.3L12 18.5l-2.3-5.2L4.5 11l5.2-2.3z'/%3E%3Cpath d='M18.5 16.5l.8 1.7 1.7.8-1.7.8-.8 1.7-.8-1.7-1.7-.8 1.7-.8z'/%3E%3C/svg%3E")}
nav button[data-tab="messages"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5l2.2-7.1A2 2 0 0 1 8.1 5h7.8a2 2 0 0 1 1.9 1.4l2.2 7.1V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 13.5h4.5l1.2 2.2h4.6l1.2-2.2H20'/%3E%3C/svg%3E")}
nav button[data-tab="knowledge"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3.5V8h4.5M9 12.5h6M9 16h4'/%3E%3C/svg%3E")}
nav button[data-tab="tasks"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.8h2.6l1.4 3.8-1.9 1.3a10.6 10.6 0 0 0 6.4 6.4l1.3-1.9 3.8 1.4v2.6a2 2 0 0 1-2.2 2A16.4 16.4 0 0 1 4.6 6a2 2 0 0 1 2-2.2z'/%3E%3Cpath d='M15 4h5v5M20 4l-6 6'/%3E%3C/svg%3E")}
nav button[data-tab="overview"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
nav button[data-tab="channels"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a7.5 7.5 0 0 1-11 6.6L4 19.5l1.4-4.8A7.5 7.5 0 1 1 20.5 11.5z'/%3E%3Cpath d='M9 10.5h6M9 13.5h4'/%3E%3C/svg%3E")}
nav button[data-tab="minutes"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='7.5'/%3E%3Cpath d='M12 13V9.2M9.5 2.8h5'/%3E%3C/svg%3E")}
nav button[data-tab="settings"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2.2'/%3E%3Ccircle cx='9' cy='17' r='2.2'/%3E%3C/svg%3E")}
@media (max-width:900px){  /* the tab bar at the bottom, also on a tablet: six tabs do not fit in the top bar below this */
  .top:not(.staff){-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--page)}  /* a blurred parent would hold the fixed bar inside it */
  .top:not(.staff) nav{position:fixed;left:0;right:0;bottom:0;z-index:25;margin:0;padding:5px max(6px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom));
    border-radius:0;border-top:1px solid var(--hair);background:var(--top-bg);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
    justify-content:space-around;gap:0;overflow:visible}
  .top:not(.staff) nav button{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;
    border-radius:12px;font-size:10.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;-webkit-tap-highlight-color:transparent}
  .top:not(.staff) nav button::before{content:"";width:25px;height:25px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:transform .3s var(--ease)}
  .top:not(.staff) nav button.on{background:none;box-shadow:none;color:var(--ctl);font-weight:600}
  .top:not(.staff) nav button:active::before{transform:scale(.88)}
  .top:not(.staff) nav button .count{position:absolute;top:2px;left:calc(50% + 7px);margin:0;min-width:17px;line-height:17px;font-size:10px;box-shadow:0 0 0 2px var(--page)}
  body:has(.top:not(.staff) nav:not([hidden])){padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  /* Six tabs on a narrow phone: a long label (Inställningar, Abonnemang) gets the room a short one leaves over */
  @media (max-width:420px){.top:not(.staff) nav button{flex:1 1 auto;font-size:9.5px;letter-spacing:-.02em}}
  .save-bar.dirty{bottom:calc(78px + env(safe-area-inset-bottom))}
}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}  /* viewport-fit=cover: clear of the notch in landscape */

/* Abonnemang: minuterna som en mätare */
.meter{margin:22px 0 10px;padding:18px 20px 16px;border-radius:16px;background:var(--inset)}
.meter-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.meter-big{font-size:34px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1}
.meter-bar{height:10px;margin:12px 0 10px;border-radius:999px;background:var(--hair);overflow:hidden}
.meter-bar span{display:block;height:100%;min-width:4px;border-radius:inherit;background:linear-gradient(90deg,#7c5cff,#47e5b5);transition:width .8s var(--ease)}
.meter.low .meter-bar span{background:var(--amber)}
.meter.out .meter-bar span{background:var(--bad);min-width:0}
.meter-legend{margin:0;font-size:15px;color:var(--muted-strong);font-variant-numeric:tabular-nums}
.meter .meta{margin:4px 0 0}

/* Inställningar i mobilen: alla flikar syns, på två rader i stället för att gömmas i sidled */
@media (max-width:640px){
  #settings-tabs{flex-wrap:wrap;justify-content:center;border-radius:20px;overflow:visible}
  #settings-tabs button{flex:0 0 auto;padding:7px 12px}
}

/* Formulären i admin: grupper med rubrik, korta fält två och två, hjälptext under fältet och en strömbrytare */
label.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 0;padding:12px 14px;border:1px solid var(--hair);border-radius:12px;cursor:pointer}
label.switch b{display:block;font-size:15px;color:var(--ink)}
label.switch input{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;padding:0;border:0;border-radius:999px;background:var(--hair-strong);cursor:pointer;transition:background-color .25s}
label.switch input::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
label.switch input:checked{background:var(--violet)}
label.switch input:checked::before{transform:translateX(18px)}
label.switch input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 25%,transparent)}
label.switch.go input:checked{background:var(--switch-on)}
label.switch.start-answer{margin:0 0 20px}
label.switch.go input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--switch-on) 30%,transparent)}
@media (max-width:640px){.start-ai .seg{flex-wrap:wrap;justify-content:center;border-radius:20px;overflow:visible}.start-ai .seg button{flex:0 0 auto}}  /* the three AI choices wrap instead of hiding sideways */
@media (max-width:640px){.start-ai .code-row:not(.start-prompt){flex-wrap:wrap;padding:12px 12px 10px 16px}.start-ai .code-row:not(.start-prompt) .code{flex-basis:100%;font-size:15px;letter-spacing:0}}  /* the address on one line, Kopiera under it */

/* Nummer hos 46elks: status med färg och en prick, grön ledig, violett hos kund, gul används av något annat */
.chip.num-free{background:var(--chip-ok-bg);color:var(--chip-ok-fg)}
.chip.num-free::before{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.chip.num-customer{background:var(--chip-bg);color:var(--chip-fg)}
.chip.num-other{background:color-mix(in srgb,var(--amber) 18%,transparent);color:color-mix(in srgb,var(--amber) 50%,var(--ink))}

/* Meddelanden efter samtal: valkorten och en inramad ruta för mobilnumret */
.notify-choice{margin:14px 0 0}
.notify-choice .voice:has(input:disabled){cursor:not-allowed}
.notify-choice .voice:has(input:disabled) :is(input,b,.meta){opacity:.5}
.notify-choice .need-verify{display:none;margin-top:2px;font-weight:500;color:var(--link)}
.notify-choice .voice:has(input:disabled) .need-verify{display:block;opacity:1}
.sms-box{margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--hair-soft)}
.sms-box h3{margin:0 0 4px;font-size:15px}
.sms-box .status-line{margin:0;font-size:14px;color:var(--graphite)}
.sms-box .row{margin-top:10px}
.sms-box button.ghost{padding:6px 0}
.sms-box .small{margin:10px 0 0}

/* Underlag: the documents the assistant answers from */
.kb-doc{padding:0}
.kb-doc>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:16px 20px;cursor:pointer;list-style:none}
.kb-doc>summary::-webkit-details-marker{display:none}
.kb-doc>summary b{font-size:17px}
.kb-doc[open]>summary{border-bottom:1px solid var(--hair)}
.kb-body{margin:0;padding:16px 20px;white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.5 var(--font);max-height:420px;overflow:auto}
.kb-doc .kb-actions{padding:0 20px 16px}
.kb-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.kb-form label{display:block;margin-bottom:14px}
.kb-intro>summary{cursor:pointer;font:600 17px var(--font)}
.kb-intro[open]>summary{margin-bottom:14px}
.kb-steps{margin:0 0 18px;padding-left:22px;display:grid;gap:10px;line-height:1.45}
.kb-label{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--graphite)}
.kb-example{margin:0 0 12px}
.kb-try{margin:0 0 20px;padding:14px 18px;border-radius:var(--radius);background:var(--inset);font-weight:500}
.kb-prompt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--inset);font-style:italic}
.kb-prompt span{flex:1}
.kb-prompt button{font-style:normal;padding:6px 12px;font-size:14px}
.kb-ai-steps{margin:14px 0 0;padding-left:22px;display:grid;gap:16px;line-height:1.45}
.kb-ai-steps .kb-prompt{margin:10px 0}
.kb-ai-steps details{margin-top:10px}

/* Inkorg: the tip that the customer's AI can tell who called */
.ask-ai{position:relative;display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 44px 14px 16px;border-radius:var(--radius);background:var(--inset);font-size:15px;line-height:1.45}
.ask-ai p{margin:0}
.ask-ai .ghost{padding:6px 0 0;font-size:15px}
.ask-ai-icon{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--ctl);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ask-ai-close{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:0;border-radius:50%;background:none;color:var(--graphite);font-size:20px;line-height:1}
.ask-ai-close:hover{background:var(--top-hover);color:var(--ink)}

/* Whether the customer's AI is connected: a plate in Din AI and Callcenter, a line in the account menu */
.ai-plate{display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;padding:10px 14px;border-radius:12px;font-size:15px;font-weight:500;line-height:1.4}
.ai-plate.ok{background:var(--ok-soft,rgba(52,168,83,.12));color:var(--ok)}
.ai-plate.stale{background:rgba(245,166,35,.16);color:#9a5b00}
.ai-plate.off{background:var(--inset);color:var(--graphite)}
.ai-dot{flex:none;width:9px;height:9px;margin-top:.45em;border-radius:50%;background:currentColor}
.account-ai{display:flex;align-items:center;gap:8px;width:100%;margin:6px 0 2px;padding:8px 10px;border-radius:10px;background:var(--inset);color:var(--graphite);font:500 13px var(--font);text-align:left;cursor:pointer}
.account-ai .ai-dot{margin:0}
.account-ai.ok{color:var(--ok)}.account-ai.stale{color:#9a5b00}
:root[data-theme="dark"] .ai-plate.stale,:root[data-theme="dark"] .account-ai.stale{color:#f5b54a}
/* Samtal in: a dot in its own column; on a phone, without the column, the chip in Läge says it */
.answering-head{display:flex;align-items:center;gap:10px}.answering-head h2{margin:0}
.answering-state{font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--danger-soft);color:var(--danger-strong)}
.answering-state.ok{background:var(--inset);color:var(--ok)}
.answering .actions{margin-top:10px}
.answering-off{display:flex;gap:12px;align-items:center;margin:0 0 18px;padding:12px 16px;border-radius:var(--radius);background:var(--danger-soft);font-size:15px;line-height:1.45}
.answering-off svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.answering-off p{margin:0;flex:1}
.answering-off button{flex:none}
@media (max-width:520px){.answering-off{flex-wrap:wrap}.answering-off button{width:100%}}
.answering-on{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 10px;border-radius:999px;background:var(--inset);color:var(--ok);font-size:13px;font-weight:500;box-shadow:none}
.answering-on .ai-dot{margin:0;width:8px;height:8px}
.answering-on:hover{background:var(--inset);text-decoration:underline}
.answering-on[hidden]{display:none}
.kb-public{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:12px 14px;border-radius:var(--radius);background:var(--danger-soft);font-size:14px;line-height:1.45}
.kb-public svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--danger-strong);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

/* Samtal for a business account: wider pages, and on a wide screen the queue beside the open call (docs/foretagsvyn.md). */
body.biz .wrap{width:min(1180px,calc(100% - 32px))}
.queue-detail{display:none}
@media (min-width:1000px){
  body.biz .queue-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
  body.biz .queue-detail:not([hidden]){display:block;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;margin-top:18px}
  .queue-detail h1{font-size:22px}
}
.row-link.on{background:var(--row-hover);box-shadow:inset 3px 0 0 var(--ink)}
.call-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 4px}
.call-acts .call-btn{margin:0}
#queue-filters button{white-space:nowrap}
@media (max-width:640px){
  body.biz .inbox-tools{width:100%;min-width:0}
  #queue-filters{min-width:0;overflow-x:auto;scrollbar-width:none}
  #queue-filters button{padding:5px 11px}
}
/* Underlag: whether a company's website chat may show the document; the chat card's key with the button that changes it */
.kb-actions .kb-chat{margin-right:auto;font-size:14px}
.chat-key-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chat-key-row p{margin:0}