/* PW Offshore — interface styles.
   Industrial marine palette: steel plate, deep sea, chalk, hazard. Built for
   a screen that stays open all day, so contrast is high and decoration is
   close to zero. RTL is the primary direction. */
:root{
  --ink:#10202B; --steel:#1E3A4C; --sea:#0F5C7A; --chalk:#F2F4F5; --paper:#fff;
  --line:#C9D2D7; --muted:#5F7280; --hazard:#C2410C; --go:#0F6E52; --warn:#B45309;
  /* One stack for all three languages: Plex covers Latin and Arabic, Noto Sans
     SC covers Chinese. The browser picks whichever has the glyph. */
  --sans:'IBM Plex Sans','IBM Plex Sans Arabic','Noto Sans SC',system-ui,'Segoe UI',Tahoma,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --nav:230px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--sans);background:var(--chalk);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.mono,.num{font-family:var(--mono);direction:ltr;display:inline-block;unicode-bidi:embed}
button,input,select,textarea{font-family:inherit;font-size:inherit}
a{color:var(--sea)}
[hidden]{display:none!important}

/* ---------------- login ---------------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#10202B 0%,#1E3A4C 55%,#0F5C7A 100%)}
.login .box{background:var(--paper);border-radius:6px;padding:32px;width:100%;max-width:390px;
  box-shadow:0 18px 50px rgba(6,18,26,.4)}
.login .logo{width:110px;height:auto;max-height:74px;object-fit:contain;margin-bottom:16px}
.login h1{margin:0 0 4px;font-size:21px}
.login p.s{margin:0 0 22px;color:var(--muted);font-size:13.5px}
.login label{margin-bottom:14px;display:block}

/* ---------------- shell ---------------- */
.shell{display:grid;grid-template-columns:var(--nav) 1fr;min-height:100vh}
nav.side{background:var(--ink);color:#CFDDE4;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column}
nav.side .brand{padding:15px 16px;border-bottom:1px solid #24404F;display:flex;gap:11px;align-items:center}
nav.side .brand img{width:52px;height:44px;object-fit:contain;background:#fff;border-radius:3px;padding:3px;flex:none}
nav.side .brand .mk{width:52px;height:44px;flex:none;border:1px solid #3A5567;border-radius:3px;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#6E8B9B}
nav.side .brand b{font-size:14px;color:#fff;font-weight:600;line-height:1.25;display:block}
nav.side .brand small{font-size:11px;color:#7C97A6}
nav.side .items{padding:6px 0;flex:1}
nav.side .grp{padding:14px 18px 5px;font-size:11px;letter-spacing:.05em;color:#5D7A8A;font-weight:600}
nav.side a.item{display:flex;align-items:center;gap:9px;padding:9px 18px;color:#B9CBD5;
  text-decoration:none;font-size:14px;cursor:pointer;border-inline-start:3px solid transparent}
nav.side a.item:hover{background:#182F3C;color:#fff}
nav.side a.item.on{background:#182F3C;color:#fff;border-inline-start-color:var(--sea);font-weight:500}
nav.side a.item .c{margin-inline-start:auto;font-family:var(--mono);font-size:11px;color:#6E8B9B}
nav.side .who{padding:12px 18px;border-top:1px solid #24404F;font-size:12.5px}
nav.side .who b{color:#fff;display:block;font-weight:500}
nav.side .who small{color:#7C97A6;font-size:11px}
nav.side .who select{width:100%}
nav.side .who button{margin-top:8px;background:none;border:1px solid #3A5567;color:#CFDDE4;
  padding:5px 11px;border-radius:3px;cursor:pointer;font-size:12.5px}
nav.side .who button:hover{border-color:var(--sea);color:#fff}
main{padding:20px 24px 60px;max-width:1300px;min-width:0}
@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  nav.side{position:static;height:auto}
  nav.side .items{display:flex;flex-wrap:wrap;gap:2px;padding:6px}
  nav.side .grp{display:none}
  nav.side a.item{border-inline-start:0;border-bottom:3px solid transparent;padding:7px 11px;border-radius:3px}
  nav.side a.item.on{border-inline-start:0;border-bottom-color:var(--sea)}
  main{padding:14px}
}

/* ---------------- primitives ---------------- */
h1.page{font-size:21px;margin:0 0 3px;font-weight:600}
p.sub{margin:0 0 18px;color:var(--muted);font-size:13.5px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;margin-bottom:16px}
.card>h2{margin:0;padding:11px 17px;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--steel);background:#EDF1F3;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.card>h2 .sp{margin-inline-start:auto;font-weight:400;color:var(--muted)}
.card .body{padding:17px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:13px 17px}
.grid .wide{grid-column:1/-1}
label{display:block}
label>.lab{display:block;font-size:12.5px;font-weight:500;color:var(--steel);margin-bottom:5px}
label>.lab em{font-style:normal;color:var(--muted);font-weight:400}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sea);outline-offset:-1px}
input[readonly],input:disabled,select:disabled{background:#F5F7F8;color:var(--muted)}
textarea{resize:vertical;min-height:74px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.err{font-size:12px;color:var(--hazard);margin-top:4px}
label.bad input,label.bad select,label.bad textarea{border-color:var(--hazard);background:#FEF5F1}
.btn{background:var(--steel);color:#fff;border:none;padding:9px 17px;border-radius:3px;cursor:pointer;font-weight:500}
.btn:hover{background:var(--sea)}
.btn:disabled{background:#93A6B0;cursor:not-allowed}
.btn.g{background:none;border:1px solid var(--line);color:var(--steel)}
.btn.g:hover{background:#EDF1F3;border-color:var(--steel)}
.btn.d{background:none;border:1px solid #E7C3B2;color:var(--hazard)}
.btn.d:hover{background:#FEF5F1}
.btn.sm{padding:5px 11px;font-size:13px}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.sp{margin-inline-start:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:start;font-size:11.5px;color:var(--muted);font-weight:600;padding:9px 12px;
  border-bottom:1px solid var(--line);background:#F7F9FA;white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid #E8EDEF;vertical-align:middle}
tbody tr:hover{background:#F7FAFB}
tbody tr.clickable{cursor:pointer}
.right{text-align:end}
.tag{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11.5px;font-weight:500;white-space:nowrap;border:1px solid}
.t-grey{background:#EEF1F3;color:#4A5D69;border-color:#DDE3E6}
.t-blue{background:#E6F1F6;color:#0B4A63;border-color:#C3DDE8}
.t-green{background:#E4F2ED;color:var(--go);border-color:#BFE0D5}
.t-amber{background:#FCF2E2;color:var(--warn);border-color:#F0DCBB}
.t-red{background:#FBEBE4;color:var(--hazard);border-color:#F0CDBC}
.empty{text-align:center;padding:42px 20px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px;font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:13px 15px;border-top:3px solid var(--sea)}
.kpi .k{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.kpi .v{font-size:22px;font-weight:600;font-family:var(--mono);direction:ltr;text-align:end}
.kpi .n{font-size:11.5px;color:var(--muted);margin-top:2px}
.kpi.money{border-top-color:var(--go)}
.kpi.alert{border-top-color:var(--hazard)}
.kpi.alert .v{color:var(--hazard)}
.note{background:#FCF2E2;border:1px solid #F0DCBB;border-radius:4px;padding:11px 14px;font-size:13.5px;color:#6B4A12;margin-bottom:16px}
.toast{position:fixed;inset-block-end:22px;inset-inline-start:22px;background:var(--ink);color:#fff;
  padding:11px 19px;border-radius:4px;z-index:200;box-shadow:0 4px 16px rgba(16,32,43,.28);font-size:14px}
.toast.bad{background:var(--hazard)}
.load{padding:44px;text-align:center;color:var(--muted)}
.spin{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--sea);
  border-radius:50%;animation:sp .7s linear infinite;margin:0 auto 10px}
@keyframes sp{to{transform:rotate(360deg)}}
.pager{display:flex;gap:8px;align-items:center;padding:11px 15px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ---------------- modal ---------------- */
.veil{position:fixed;inset:0;background:rgba(16,32,43,.55);display:grid;place-items:start center;
  padding:24px 14px;overflow-y:auto;z-index:100}
.modal{background:var(--paper);border-radius:4px;width:100%;box-shadow:0 12px 40px rgba(16,32,43,.3)}
.modal>header{padding:14px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.modal>header h3{margin:0;font-size:16px;font-weight:600}
.modal .content{padding:19px;max-height:66vh;overflow-y:auto}
.modal>footer{padding:13px 19px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:#F7F9FA;flex-wrap:wrap}
.x{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;padding:0 4px}

/* ---------------- line items ---------------- */
.items{width:100%;border-collapse:collapse;font-size:13.5px}
.items th{padding:7px 8px;font-size:11px}
.items td{padding:5px 6px;border-bottom:1px solid #EEF1F3}
.items input{padding:6px 8px;font-size:13.5px}
.items .n input{text-align:end;direction:ltr;font-family:var(--mono)}
.totals{margin-top:13px;margin-inline-start:auto;max-width:318px;font-size:14px}
.totals .l{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #EEF1F3}
.totals .l.big{border-bottom:none;border-top:2px solid var(--steel);margin-top:5px;padding-top:10px;font-size:17px;font-weight:600}
.totals .l span:last-child{font-family:var(--mono);direction:ltr}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   Dashboard
   Money is shown per currency, never summed. The gauge borrows the load line
   from a ship's hull: the water level is what has been collected.
   ========================================================================== */

.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin-bottom: 8px; }
.asis { margin: 0 0 18px; font-size: 12px; color: var(--muted); }

.cur { background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
       padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 12px;
       border-top: 3px solid var(--sea); animation: rise .45s ease both; }
.cur:nth-child(2) { animation-delay: .06s } .cur:nth-child(3) { animation-delay: .12s }
.cur:nth-child(4) { animation-delay: .18s } .cur:nth-child(5) { animation-delay: .24s }
.cur > header { display: flex; align-items: baseline; gap: 9px; }
.cur .code { font-family: var(--mono); font-size: 17px; letter-spacing: .04em; color: var(--ink); }
.cur .n { margin-inline-start: auto; font-size: 11.5px; color: var(--muted); }

/* the load line */
.cur .hull { position: relative; height: 92px; border: 1px solid var(--line); border-radius: 3px;
             background: linear-gradient(#FBFCFC, #F4F7F8); overflow: hidden; }
.cur .water { position: absolute; inset-inline: 0; bottom: 0; height: 0;
              background: linear-gradient(180deg, #1B7FA6, #0F5C7A);
              animation: flood 1.1s cubic-bezier(.2,.8,.25,1) .15s forwards; }
.cur .water::after { content: ''; position: absolute; inset-inline: 0; top: -3px; height: 6px;
                     background: rgba(255,255,255,.55); border-radius: 50%; }
.cur .mark { position: absolute; inset-inline-start: 0; width: 14px; height: 1px; background: var(--line); }
.cur .mark::after { content: ''; position: absolute; inset-inline-end: 0; width: 100%; height: 1px; }
.cur .pct { position: absolute; inset-block-start: 8px; inset-inline-end: 10px;
            font-family: var(--mono); font-size: 12px; color: var(--steel);
            background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 10px; }
.cur .pct b { font-size: 15px; }
@keyframes flood { to { height: var(--fill); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cur dl { margin: 0; display: grid; gap: 6px; }
.cur dl > div { display: flex; align-items: baseline; gap: 8px; }
.cur dt { font-size: 12px; color: var(--muted); }
.cur dd { margin: 0 0 0 auto; font-family: var(--mono); direction: ltr; font-size: 14px; font-weight: 500; }
.cur dd.go { color: var(--go); } .cur dd.bad { color: var(--hazard); font-weight: 600; }
.cur .od { margin: 0; font-size: 12px; color: var(--hazard); border-top: 1px solid #F0CDBC; padding-top: 8px; }

/* headline tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 13px 15px;
        animation: rise .45s ease both; }
.tile:nth-child(2){animation-delay:.05s} .tile:nth-child(3){animation-delay:.1s} .tile:nth-child(4){animation-delay:.15s}
.tile .lab { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.tile b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1; }
.tile .foot { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.tile.warn { border-top: 3px solid var(--hazard); } .tile.warn b { color: var(--hazard); }

.split2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
@media (max-width: 900px) { .split2 { grid-template-columns: 1fr; } }

/* pipeline */
.pipe { display: flex; height: 34px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.pipe .seg { width: 0; display: grid; place-items: center; color: #fff; font-size: 12px;
             animation: widen .7s cubic-bezier(.2,.8,.25,1) both; }
.pipe .seg:nth-child(2){animation-delay:.08s} .pipe .seg:nth-child(3){animation-delay:.16s}
.pipe .seg:nth-child(4){animation-delay:.24s} .pipe .seg:nth-child(5){animation-delay:.32s}
@keyframes widen { to { width: var(--w); } }
.s1 { background: #93A6B0 } .s2 { background: #B45309 } .s3 { background: #1E3A4C }
.s4 { background: #0F5C7A } .s5 { background: #0F6E52 }
.pipekey { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; font-size: 12px; color: var(--muted); }
.pipekey b { color: var(--ink); font-family: var(--mono); }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-inline-end: 5px; }
.sw.inv { background: var(--steel) } .sw.col { background: var(--go) }

/* utilisation ring */
.ringrow { display: grid; place-items: center; }
.ring { position: relative; width: 150px; text-align: center; }
.ring svg { width: 110px; height: 110px; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: #E8EDEF; stroke-width: 9; }
.ring .fill { fill: none; stroke: var(--sea); stroke-width: 9; stroke-linecap: round;
              stroke-dasharray: var(--dash); stroke-dashoffset: var(--dash);
              animation: sweep 1s cubic-bezier(.2,.8,.25,1) .2s forwards; }
@keyframes sweep { to { stroke-dashoffset: var(--to); } }
.ring .mid { position: absolute; inset-block-start: 34px; inset-inline: 20px; font-family: var(--mono); }
.ring .mid b { font-size: 24px; font-weight: 600; } .ring .mid span { font-size: 13px; color: var(--muted); }
.ring .rlab { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.ring .rlab small { display: block; font-family: var(--mono); color: var(--ink); font-size: 12px; }

/* twelve month columns */
.months { display: flex; align-items: flex-end; gap: 6px; height: 168px; }
.mo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.mo .pair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.mo .bar { width: 44%; max-width: 15px; height: 0; border-radius: 2px 2px 0 0;
           animation: grow .6s cubic-bezier(.2,.8,.25,1) both; animation-delay: calc(var(--i) * .04s); }
.mo .bar.inv { background: var(--steel); } .mo .bar.col { background: var(--go); }
@keyframes grow { to { height: var(--h); } }
.mo .mlab { font-size: 10.5px; color: var(--muted); }
.legend { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }

/* attention */
.att { margin-bottom: 16px; }
.att:last-child { margin-bottom: 0; }
.att h3 { margin: 0 0 7px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.att h3 span { font-family: var(--mono); font-size: 11px; background: #EDF1F3; color: var(--steel);
               border-radius: 9px; padding: 1px 8px; }
.att td.late { color: var(--hazard); } .att td.soon { color: var(--warn); }
.clear { margin: 0; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .cur, .tile { animation: none; }
  .cur .water { height: var(--fill); animation: none; }
  .pipe .seg { width: var(--w); animation: none; }
  .ring .fill { stroke-dashoffset: var(--to); animation: none; }
  .mo .bar { height: var(--h); animation: none; }
}

/* ==========================================================================
   Internal messages
   ========================================================================== */

.chat { display: grid; grid-template-columns: 290px 1fr; gap: 0;
        border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
        background: var(--paper); height: calc(100vh - 210px); min-height: 420px; }
@media (max-width: 820px) { .chat { grid-template-columns: 1fr; height: auto; }
  .chat .threads { max-height: 240px; } }

.threads { border-inline-end: 1px solid var(--line); overflow-y: auto; background: #FAFCFC; }
.th { display: flex; gap: 10px; align-items: center; width: 100%; text-align: start;
      padding: 11px 13px; background: none; border: 0; border-bottom: 1px solid var(--line);
      cursor: pointer; font: inherit; color: inherit; }
.th:hover { background: #F1F5F6; }
.th.on { background: var(--paper); box-shadow: inset 3px 0 0 var(--sea); }
.th .av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
          background: var(--steel); color: #fff; font-weight: 600; font-size: 13px; }
.th .av.team { background: var(--sea); font-family: var(--mono); }
.th .who { flex: 1; min-width: 0; }
.th .who b { display: block; font-size: 13.5px; }
.th .who small { display: block; font-size: 12px; color: var(--muted);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th .meta { text-align: end; flex: none; }
.th .meta time { display: block; font-size: 10.5px; color: var(--muted); }
.th .dot { display: inline-block; margin-top: 3px; min-width: 18px; padding: 1px 5px;
           background: var(--hazard); color: #fff; border-radius: 9px;
           font-size: 10.5px; font-style: normal; font-family: var(--mono); text-align: center; }

.convo { display: flex; flex-direction: column; min-width: 0; }
.chead { padding: 11px 16px; border-bottom: 1px solid var(--line); }
.chead b { font-size: 14px; } .chead small { display: block; font-size: 11.5px; color: var(--muted); }

.stream { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px;
          background: linear-gradient(#F7F9FA, #FBFCFC); }
.day { text-align: center; margin: 6px 0; }
.day span { font-size: 11px; color: var(--muted); background: var(--paper);
            border: 1px solid var(--line); border-radius: 10px; padding: 2px 10px; }

.msg { position: relative; max-width: 74%; align-self: flex-start; background: var(--paper);
       border: 1px solid var(--line); border-radius: 4px 10px 10px 10px; padding: 8px 12px 6px;
       animation: pop .22s ease both; }
.msg.mine { align-self: flex-end; background: #E7F1F5; border-color: #C5DCE5;
            border-radius: 10px 4px 10px 10px; }
.msg .from { display: block; font-size: 11.5px; color: var(--sea); margin-bottom: 2px; }
.msg p { margin: 0; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.msg time { display: block; text-align: end; font-size: 10px; color: var(--muted); margin-top: 3px; }
.msg .pull { position: absolute; inset-block-start: 4px; inset-inline-start: -26px;
             width: 20px; height: 20px; border: 0; background: none; color: var(--muted);
             cursor: pointer; font-size: 15px; line-height: 1; opacity: 0; transition: opacity .15s; }
.msg:hover .pull, .msg .pull:focus-visible { opacity: 1; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.composer { display: flex; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--line); align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 38px; max-height: 160px; margin: 0; }
.composer.readonly { display: block; margin: 0; color: var(--muted); font-size: 12.5px; }

/* unread marker in the sidebar */
.nav .badge { margin-inline-start: auto; min-width: 18px; padding: 0 5px; background: var(--hazard);
              color: #fff; border-radius: 9px; font-size: 10.5px; font-family: var(--mono); text-align: center; }

/* ==========================================================================
   Chat dock
   Pinned to the bottom corner, so a message can be answered without leaving
   the page. Uses logical properties, so it sits bottom-left in Arabic.
   ========================================================================== */

.dock { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 60;
        display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

.dock .launch { width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
                background: var(--sea); color: #fff; display: grid; place-items: center;
                box-shadow: 0 6px 18px rgba(16,32,43,.28); position: relative;
                transition: transform .16s ease, background .16s ease; }
.dock .launch:hover { background: var(--steel); transform: translateY(-2px); }
.dock .launch:active { transform: none; }
.dock .launch svg { width: 25px; height: 25px; fill: currentColor; }
.dock.on .launch { background: var(--steel); }
.dock .tick { position: absolute; inset-block-start: -3px; inset-inline-end: -3px;
              min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
              background: var(--hazard); color: #fff; font-size: 11px; font-family: var(--mono);
              display: grid; place-items: center; border: 2px solid var(--paper); }

.dock .panel { width: 340px; max-width: calc(100vw - 40px); height: 460px; max-height: calc(100vh - 130px);
               background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
               box-shadow: 0 14px 40px rgba(16,32,43,.22); display: flex; flex-direction: column;
               overflow: hidden; animation: dockIn .18s ease both; }
@keyframes dockIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.dock .panel > header { display: flex; align-items: center; gap: 6px; padding: 10px 12px;
                        background: var(--ink); color: #fff; }
.dock .panel > header b { flex: 1; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock .panel .ghost, .dock .panel .back { background: none; border: 0; color: #9FB4C0; cursor: pointer;
        font-size: 15px; line-height: 1; padding: 3px 5px; border-radius: 3px; }
.dock .panel .ghost:hover, .dock .panel .back:hover { color: #fff; background: rgba(255,255,255,.1); }
.dock .panel .ghost.lit { color: #EFC86B; }
.dock .panel .back { font-size: 22px; }

.dock .pbody { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dock .wait { margin: auto; padding: 24px; color: var(--muted); font-size: 13px; text-align: center; }

.dthreads { overflow-y: auto; }
.dth { display: flex; gap: 9px; align-items: center; width: 100%; text-align: start; font: inherit; color: inherit;
       padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.dth:hover { background: #F1F5F6; }
.dth .av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
           background: var(--steel); color: #fff; font-size: 12px; font-weight: 600; }
.dth .av.team { background: var(--sea); font-family: var(--mono); }
.dth .who { flex: 1; min-width: 0; }
.dth .who b { display: block; font-size: 13px; }
.dth .who small { display: block; font-size: 11.5px; color: var(--muted);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dth .meta { text-align: end; flex: none; }
.dth .meta time { display: block; font-size: 10px; color: var(--muted); }
.dth .dot { display: inline-block; margin-top: 2px; min-width: 17px; padding: 0 5px; background: var(--hazard);
            color: #fff; border-radius: 9px; font-size: 10px; font-style: normal;
            font-family: var(--mono); text-align: center; }

.dstream { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 7px;
           background: linear-gradient(#F7F9FA, #FBFCFC); }
.dstream .msg { max-width: 82%; }
.dstream .msg p { font-size: 13px; }

.dsend { display: flex; gap: 7px; padding: 9px 10px; border-top: 1px solid var(--line); align-items: flex-end; }
.dsend textarea { flex: 1; resize: none; min-height: 34px; max-height: 96px; margin: 0; font-size: 13px; padding: 7px 9px; }
.dsend .btn { padding: 7px 12px; }
.dlocked { margin: 0; padding: 11px 13px; border-top: 1px solid var(--line);
           color: var(--muted); font-size: 12.5px; }

/* an actionable toast, for "you have a new message" */
.toast.act { cursor: pointer; border-inline-start: 3px solid var(--sea); }
.toast.act:hover { filter: brightness(1.08); }

@media (max-width: 560px) {
  .dock { inset-block-end: 14px; inset-inline-end: 14px; }
  .dock .panel { width: calc(100vw - 28px); height: calc(100vh - 120px); }
}
@media print { .dock { display: none; } }

/* Photographs on an inspection report */
.shotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.shot { margin: 0; position: relative; border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
        background: var(--paper); }
.shot img { width: 100%; height: 130px; object-fit: cover; display: block; }
.shot figcaption { display: flex; gap: 6px; padding: 7px; align-items: center; }
.shot figcaption input { margin: 0; font-size: 12px; padding: 5px 7px; }
.shot .tag { position: absolute; inset-block-start: 6px; inset-inline-start: 6px;
             background: var(--sea); color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 9px; }