/* ------------------------------------------------------------- tokens */
:root{
  --bg:#f6f7f9;          --surface:#ffffff;     --surface-2:#fbfcfd;
  --line:#e3e7ed;        --line-2:#eef1f5;
  --ink:#141a22;         --ink-2:#4a5665;       --ink-3:#7b8798;
  --accent:#1d4ed8;      --accent-soft:#eaf0ff; --accent-line:#c6d6ff;
  --rec:#dc2626;         --rec-soft:#fee6e6;
  --ok:#0f7b52;          --ok-soft:#e3f5ec;
  --warn:#a16207;        --warn-soft:#fdf4dc;
  --shadow:0 1px 2px rgba(20,26,34,.05), 0 8px 24px -12px rgba(20,26,34,.16);
  --shadow-lg:0 4px 12px rgba(20,26,34,.08), 0 24px 48px -20px rgba(20,26,34,.25);
  --r:12px; --r-sm:8px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:var(--accent)}

/* ------------------------------------------------------------- layout */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

header.top{
  flex:none;display:flex;align-items:center;gap:16px;
  padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:10px;flex:none}
.brand h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em}
.brand .count{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.search{position:relative;flex:1;max-width:520px}
.search input{
  width:100%;padding:9px 34px 9px 36px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface-2);outline:none;
}
.search input:focus{border-color:var(--accent-line);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--ink-3);padding:4px;line-height:0;border-radius:4px}
.search .clr:hover{background:var(--line-2);color:var(--ink)}

.top-actions{display:flex;gap:8px;flex:none;margin-left:auto}

.btn{
  display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:500;
  color:var(--ink-2);transition:.13s;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#1a44bd;border-color:#1a44bd;color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--line-2)}
.btn.danger{color:var(--rec);border-color:var(--line)}
.btn.danger:hover{background:var(--rec-soft);border-color:var(--rec)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:5px 9px;font-size:13px}

/* --------------------------------------------------------------- body */
.body{flex:1;display:flex;min-height:0}

aside{
  flex:none;width:216px;background:var(--surface);border-right:1px solid var(--line);
  padding:14px 10px;overflow-y:auto;
}
.side-h{font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:0 10px;margin:14px 0 6px}
.side-h:first-child{margin-top:0}
.fbtn{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border-radius:var(--r-sm);
  font-size:14px;color:var(--ink-2);text-align:left;transition:.12s;
}
.fbtn:hover{background:var(--line-2);color:var(--ink)}
.fbtn.on{background:var(--accent-soft);color:var(--accent);font-weight:550}
.fbtn .n{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fbtn.on .n{color:var(--accent)}
/* The one switch that changes every list, so it does not look like the filters
   beside it: when it is on, the whole row is filled, not just tinted. */
.fbtn.sift{border:1px dashed var(--line)}
.fbtn.sift.on{background:var(--ok-soft);color:var(--ok);border:1px solid transparent;font-weight:600}
.fbtn.sift.on .n{color:var(--ok)}

main{flex:1;display:flex;min-width:0}

/* --------------------------------------------------------------- list */
.list-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.list-head{
  flex:none;display:grid;
  grid-template-columns:1.05fr 1.05fr 1.2fr 1fr 92px 80px 54px;
  gap:14px;padding:9px 20px;border-bottom:1px solid var(--line);
  font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  background:var(--surface);
}
.rows{flex:1;overflow-y:auto;padding-bottom:60px}
.row{
  display:grid;grid-template-columns:1.05fr 1.05fr 1.2fr 1fr 92px 80px 54px;gap:14px;
  padding:11px 20px;border-bottom:1px solid var(--line-2);
  align-items:center;cursor:pointer;transition:background .1s;background:var(--surface);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.row:hover{background:var(--surface-2)}
.row.sel{background:var(--accent-soft)}
.row.sel .cell{color:var(--ink)}
.cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell.name{font-weight:550;color:var(--ink)}
.cell.dim{color:var(--ink-3)}
.cell.mono{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.empty-cell{color:#c3cbd6}
.sub{font-size:12px;color:var(--ink-3);font-weight:400;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flags{display:flex;gap:5px;align-items:center;justify-content:flex-end}

.pill{
  display:inline-flex;align-items:center;padding:1px 7px;border-radius:20px;
  font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
.pill.person{background:var(--accent-soft);color:var(--accent)}
.pill.business{background:#f1ecfe;color:#6d3fd4}
.pill.service{background:#eceff3;color:var(--ink-2)}
.pill.unknown{background:#fdecec;color:#b4342f}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}

.star{color:#d3d9e2;line-height:0;padding:2px;border-radius:4px}
.star.on{color:#e0a800}
.star:hover{background:var(--line-2)}

/* the three WhatsApp lists: a lamp for spiritual, scales for legal, a chip for AI.
   Off is a faint outline; on is the list's own colour on its own wash. */
.send{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.flag{color:#cbd2dc;line-height:0;padding:4px;border-radius:7px;transition:.12s}
.flag:hover{background:var(--line-2);color:var(--ink-2)}
.flag.spirit.on{color:#c2410c;background:#fdeee2}
.flag.legal.on{color:#3f3daf;background:#ececfa}
.flag.ai.on{color:#0f766e;background:#def3ef}
.flag.spirit.on:hover{background:#fbe2cf}
.flag.legal.on:hover{background:#e0e0f6}
.flag.ai.on:hover{background:#cbebe5}
.panel-head .flag{flex:none}

/* Removing a name is one click, so the two ways to do it stay out of sight until the
   pointer is on that row (or a key has tabbed into it). The column keeps its width
   either way, so nothing shifts when they appear. The Undo toast and the bin are the
   safety net — there is no confirm box, that would defeat one click. */
.strike{display:flex;align-items:center;justify-content:flex-end;gap:2px;
  opacity:0;transition:opacity .12s}
.row:hover .strike,.row.sel .strike,.strike:focus-within{opacity:1}
.act{color:#aab4c2;line-height:0;padding:4px;border-radius:7px;transition:.12s}
.act.del:hover{color:var(--ink);background:var(--line-2)}
.act.ban:hover{color:var(--rec);background:var(--rec-soft)}

/* A finger has no hover. On touch the buttons stay visible, and only the blacklist
   is offered — the row is too narrow for two, and Delete lives in the open card. */
/* A finger has no hover, so on touch both buttons simply stay visible. */
@media (hover:none){ .strike{opacity:1} }

/* The bulk bar shows only when the list is narrowed to a shelf worth marking whole.
   Each button names the list it acts on and carries the count in its tooltip; the
   press is undone from the toast, so there is no confirm box. */
.bulk{flex:none;display:flex;align-items:center;gap:7px;overflow-x:auto;
  padding:8px 20px;border-bottom:1px solid var(--line);background:var(--surface-2);
  scrollbar-width:none}
.bulk::-webkit-scrollbar{display:none}
.bulk .lbl{flex:none;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-right:3px}
.bulk-btn{flex:none;padding:4px 11px;border-radius:20px;font-size:12.5px;font-weight:550;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);transition:.12s;
  white-space:nowrap}
.bulk-btn.add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.bulk-btn.drop{color:var(--ink-3)}
.bulk-btn.drop:hover{border-color:var(--rec);color:var(--rec);background:var(--rec-soft)}

.loading,.no-results{padding:56px 20px;text-align:center;color:var(--ink-3)}
.list-foot{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:9px 20px;border-top:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink-3)}

/* -------------------------------------------------------------- panel */
.panel{
  flex:none;width:400px;background:var(--surface);border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
.panel.hidden{display:none}
.panel-head{flex:none;display:flex;align-items:center;gap:8px;
  padding:13px 16px;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-size:15px;font-weight:650;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-body{flex:1;overflow-y:auto;padding:16px}
.panel-foot{flex:none;display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2)}

.fld{margin-bottom:13px}
.fld label{display:block;font-size:11px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);outline:none;transition:.12s;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--accent-line);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.fld textarea{resize:vertical;min-height:56px}
.fld.changed input,.fld.changed textarea{background:#fffbe8;border-color:#e8d48a}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.multi-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.multi-row input.lbl{flex:0 0 84px}
.multi-row input.val{flex:1}
.multi-row button{flex:none;color:var(--ink-3);padding:6px;border-radius:6px;line-height:0}
.multi-row button:hover{background:var(--rec-soft);color:var(--rec)}
.add-link{font-size:13px;color:var(--accent);font-weight:500;padding:3px 0}
.add-link:hover{text-decoration:underline}

.orig{font-size:12px;color:var(--ink-3);background:var(--surface-2);
  border:1px dashed var(--line);border-radius:var(--r-sm);padding:8px 10px;margin-bottom:13px;
  word-break:break-word}
.orig b{color:var(--ink-2);font-weight:600}

/* ---------------------------------------------------------- mic / voice */
.voice{
  border:1px solid var(--accent-line);background:linear-gradient(180deg,#f7faff,#eef4ff);
  border-radius:var(--r);padding:14px;margin-bottom:16px;
}
.voice.rec{border-color:var(--rec);background:linear-gradient(180deg,#fff7f7,#ffecec)}
.voice-top{display:flex;align-items:center;gap:12px}
.mic{
  flex:none;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(29,78,216,.32);transition:.15s;
}
.mic:hover{transform:scale(1.05)}
.mic:active{transform:scale(.96)}
.mic.rec{background:var(--rec);box-shadow:0 0 0 0 rgba(220,38,38,.5);animation:pulse 1.4s infinite}
.mic:disabled{background:var(--ink-3);animation:none;transform:none}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}
  70%{box-shadow:0 0 0 16px rgba(220,38,38,0)}
  100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}
}
.voice-txt{flex:1;min-width:0}
.voice-txt .t1{font-size:14px;font-weight:600;color:var(--ink)}
.voice-txt .t2{font-size:12.5px;color:var(--ink-2);margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:2px;height:22px;margin-top:6px}
.bars i{width:3px;background:var(--rec);border-radius:2px;height:3px;transition:height .08s}

.heard{margin-top:11px;padding:9px 11px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2)}
.heard b{display:block;font-size:10.5px;font-weight:650;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.applied{margin-top:8px;font-size:13px;color:var(--ok);font-weight:500;
  display:flex;align-items:flex-start;gap:6px}

.hint{margin-top:10px;font-size:12px;color:var(--ink-3);line-height:1.55}
.hint code{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-size:11.5px;color:var(--ink-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* -------------------------------------------------------------- toast */
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:100;align-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm);
  font-size:13.5px;box-shadow:var(--shadow-lg);max-width:min(90vw,520px);
  animation:rise .2s ease-out;
}
.toast.err{background:#b4241f}
.toast.ok{background:var(--ok)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------- dialog */
.scrim{position:fixed;inset:0;background:rgba(20,26,34,.34);z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:rise .15s}
.dialog{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lg);
  width:min(460px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.dialog h3{margin:0;padding:15px 18px;font-size:15.5px;font-weight:650;border-bottom:1px solid var(--line)}
.dialog .dbody{padding:16px 18px;overflow-y:auto}
.dialog .dfoot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;
  border-top:1px solid var(--line);background:var(--surface-2)}

.kbd{font-size:11.5px;color:var(--ink-3)}
.kbd b{background:var(--surface-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:4px;padding:1px 5px;font-weight:600;color:var(--ink-2);font-size:11px}

/* ------------------------------------------------------------ responsive */
@media (max-width:1180px){ .panel{width:350px} aside{width:190px} }
@media (max-width:960px){
  aside{display:none}
  .list-head,.row{grid-template-columns:1fr 1fr 1.05fr 76px 80px 52px}
  .list-head .h-org,.row .c-org{display:none !important}
}
@media (max-width:760px){
  header.top{flex-wrap:wrap;padding:10px 12px;gap:10px}
  .search{max-width:none;order:3;flex-basis:100%}
  .top-actions .lbl-hide{display:none}
  main{position:relative}
  /* A phone cannot hold five targets and still show a number. The star gives up its
     place so BOTH ways of removing a name fit — the star stays in the open card, and
     it is the least-used of the four. The columns are wider than before, not narrower.
     Three list buttons need 74px; the gaps give up the room, not the buttons. */
  .list-head,.row{grid-template-columns:1fr 1fr 74px 52px;gap:6px;
    padding-left:12px;padding-right:10px}
  .send{gap:2px}
  .row .flags{display:none}
  .list-head .h-circle{display:none}
  .list-head .h-last,.row .c-last{display:none !important}
  .list-foot .kbd{display:none}
  .row{padding-top:13px;padding-bottom:13px}
  .panel{position:absolute;inset:0;width:auto;border-left:none;z-index:20}
  .panel-head{gap:5px}
  .list-foot{padding:9px 12px}
  .bulk{padding:7px 12px}
}

/* ==================================================== circles & colour ==== */
/* Every row carries its circle as --ink/--wash/--line, set inline from the
   palette the server ships. Colour means the circle; the dot means closeness. */
.row{border-left:3px solid transparent}
.row[data-circle]{border-left-color:var(--cink,transparent)}
.row[data-circle]:hover{background:var(--cwash,var(--surface-2))}
.row.sel[data-circle]{background:var(--cwash,var(--accent-soft));
  box-shadow:inset 0 0 0 1px var(--cline,transparent)}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
  color:var(--cink,var(--ink-2));background:var(--cwash,var(--line-2));
  border:1px solid var(--cline,transparent)}
.chip .hi{font-weight:500;opacity:.8}

/* closeness: filled = inner, half = regular, hollow = outer */
.ring{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--cink,var(--ink-3));
  display:inline-block;margin-right:7px;vertical-align:middle}
.ring.inner{background:var(--cink,var(--ink-3))}
.ring.regular{background:linear-gradient(90deg,var(--cink,var(--ink-3)) 50%,transparent 50%)}
.ring.outer{background:transparent;opacity:.55}

.cell.name{display:flex;align-items:center;min-width:0}
.cell.name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell.name .stack{min-width:0}

/* ------------------------------------------------- "what do you need?" ---- */
.needs{flex:none;display:flex;align-items:center;gap:7px;padding:9px 20px;
  background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;
  scrollbar-width:none}
.needs::-webkit-scrollbar{display:none}
.needs .lbl{flex:none;font-size:12px;color:var(--ink-3);font-weight:500;padding-right:2px}
.need{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:20px;border:1px solid var(--line);background:var(--surface-2);
  font-size:13px;font-weight:500;color:var(--ink-2);transition:.12s;white-space:nowrap}
.need:hover{border-color:var(--cink);color:var(--cink);background:var(--cwash)}
.need.on{background:var(--cink);border-color:var(--cink);color:#fff}
.need .dot{width:8px;height:8px;border-radius:50%;background:var(--cink);flex:none}
.need.on .dot{background:#fff}

/* ------------------------------------------------------------ my world ---- */
.world{padding:22px 20px 40px;overflow-y:auto;background:var(--bg)}
.world h2{margin:0 0 3px;font-size:19px;font-weight:650;letter-spacing:-.01em}
.world .sub{margin:0 0 20px;font-size:13.5px;color:var(--ink-3)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px}
.wcard{position:relative;text-align:left;padding:14px 15px 13px;border-radius:var(--r);
  border:1px solid var(--cline,var(--line));background:var(--cwash,var(--surface));
  transition:.14s;overflow:hidden}
.wcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--cink)}
.wcard .bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cink)}
.wcard .n{font-size:27px;font-weight:650;line-height:1.05;color:var(--cink);
  font-variant-numeric:tabular-nums}
.wcard .en{margin-top:3px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.wcard .hi{font-size:12.5px;color:var(--ink-3);margin-top:1px}
.wcard .meter{margin-top:9px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.wcard .meter i{display:block;height:100%;background:var(--cink);border-radius:2px}
.wsec{margin:26px 0 11px;font-size:11px;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}

.side-dot{width:9px;height:9px;border-radius:3px;flex:none;background:var(--cink,var(--ink-3))}

/* ============================================== the big mic ============= */
/* The mic used to be a 52px circle that only existed once a card was open.
   It is the whole point of the app, so it now floats above everything and
   works from anywhere. */
.mic-dock{
  position:fixed; right:24px; bottom:24px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.mic-big{
  width:74px; height:74px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; display:flex; align-items:center;
  justify-content:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(29,78,216,.40), 0 2px 6px rgba(20,26,34,.18);
  transition:transform .15s, background .15s, box-shadow .15s;
}
.mic-big:hover{transform:scale(1.06)}
.mic-big:active{transform:scale(.95)}
.mic-big.rec{
  background:var(--rec);
  box-shadow:0 6px 20px rgba(220,38,38,.45);
  animation:micpulse 1.3s infinite;
}
.mic-big.busy{background:var(--ink-3);animation:none;cursor:progress}
.mic-big:disabled{opacity:.5;cursor:not-allowed}
@keyframes micpulse{
  0%{box-shadow:0 6px 20px rgba(220,38,38,.45), 0 0 0 0 rgba(220,38,38,.45)}
  70%{box-shadow:0 6px 20px rgba(220,38,38,.45), 0 0 0 22px rgba(220,38,38,0)}
  100%{box-shadow:0 6px 20px rgba(220,38,38,.45), 0 0 0 0 rgba(220,38,38,0)}
}
.mic-label{
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:550;
  padding:6px 12px; border-radius:20px; box-shadow:var(--shadow);
  white-space:nowrap; max-width:74vw; overflow:hidden; text-overflow:ellipsis;
}
.mic-label.ok{background:var(--ok)}
.mic-label.err{background:var(--rec)}
.mic-bars{display:flex;align-items:flex-end;gap:3px;height:26px;
  background:var(--card,#fff);border:1px solid var(--line);border-radius:20px;
  padding:4px 10px;box-shadow:var(--shadow)}
.mic-bars i{width:3px;background:var(--rec);border-radius:2px;height:3px;transition:height .07s}

/* the in-panel mic becomes secondary now that the dock carries the job */
.voice{padding:11px 13px}
.mic{width:42px;height:42px}

@media (max-width:760px){
  .mic-dock{right:16px;bottom:16px}
  .mic-big{width:66px;height:66px}
  .list-foot{padding-right:100px}
}