/* Gantry · salman-lm.css
   LinkedIn Multi-Account Manager sub-tab (#panel-salman > #subpanel-multiaccount):
   the account selector, the personality bar, and the Add Account modal. Every
   other class the sub-tab needs (cards, filters, KB panel, modals, pagination,
   status lines, start gate) is already shared with Media Post/Carousel in
   cards.css/hitec.css/shell.css and is intentionally not repeated here. */

  .lm-acct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}

  /* ---- Account selector ---- */
  /* max-width + the min-width:0 chain below let the selected account's label
     ellipsis instead of pushing the pill past the screen edge. Without them a
     long "Name (email)" on a phone made the whole PAGE scroll sideways, because
     an inline-flex child will not shrink below its content width unless every
     ancestor in the chain allows it. */
  .acct-selector{
    position:relative;display:inline-flex;align-items:center;gap:10px;
    padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);
    white-space:nowrap;max-width:100%;min-width:0;
  }
  .acct-selector label{font-size:.75rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;flex:none}
  /* The JS mounts the trigger + list into an unclassed <div>, which is the real
     flex item here. It needs the shrink permission too, or the chain breaks at
     this link and the pill grows past the screen regardless of the rules below.
     Deliberately NOT position:relative: the dropdown is anchored to the pill. */
  .acct-selector > div{min-width:0;flex:1 1 auto}
  /* display:flex + width:100%, not inline-flex: the mount above is a plain block,
     so an inline-flex child sizes to its content and overflows it no matter what
     the parent allows. Filling the mount is what lets the value ellipsis. */
  .acct-custom-select{display:flex;width:100%;align-items:center;gap:8px;cursor:pointer;user-select:none;min-width:0}
  .acct-custom-value{font-size:.84rem;font-weight:600;color:var(--ink-1);max-width:280px;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acct-custom-arrow{width:16px;height:16px;flex:none;color:var(--ink-3);transition:transform var(--dur-1) var(--ease)}
  .acct-custom-select[aria-expanded="true"] .acct-custom-arrow{transform:rotate(180deg)}
  .acct-dropdown{
    /* max-width is also bounded by the viewport so the open list cannot be the
       thing that makes a phone scroll sideways. */
    position:absolute;top:calc(100% + 8px);right:0;min-width:220px;max-width:min(450px, calc(100vw - 32px));
    background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:6px;
    box-shadow:0 8px 30px rgba(0,0,0,.35);z-index:200;display:none;animation:lmDropIn .15s ease;
  }
  .acct-dropdown.open{display:block}
  @keyframes lmDropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
  .acct-dropdown-item{
    display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;
    font-size:.84rem;font-weight:500;color:var(--ink-2);
    transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .acct-dropdown-item:hover{background:var(--surface-1);color:var(--ink-1)}
  .acct-dropdown-item.selected{background:rgba(25,103,255,.14);color:var(--ink-1);font-weight:700}
  .acct-dropdown-item .acct-dot{width:7px;height:7px;border-radius:50%;background:var(--border);flex:none;transition:background var(--dur-1) var(--ease)}
  .acct-dropdown-item.selected .acct-dot{background:var(--accent);box-shadow:0 0 0 3px rgba(25,103,255,.22)}
  .acct-dropdown-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .acct-dropdown-tick{width:16px;height:16px;color:var(--accent);flex:none;display:none}
  .acct-dropdown-item.selected .acct-dropdown-tick{display:block}
  .acct-loading{font-size:.78rem;color:var(--ink-2);font-style:italic}

  /* ---- Personality bar ---- */
  .personality-bar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:10px 14px;margin:0 0 16px;border:1px solid var(--border-soft);border-radius:var(--radius-sm);
    background:var(--surface-1);
  }
  .personality-bar[hidden]{display:none}
  .personality-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);flex:none}
  .personality-text{flex:1;font-size:.84rem;color:var(--ink-2);line-height:1.5;font-style:italic;min-width:0}
  .personality-text.empty{color:var(--ink-3);font-style:normal}
  .btn-edit-personality{
    display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
    background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:.78rem;font-weight:600;
    padding:5px 12px;border-radius:8px;cursor:pointer;
    transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);flex:none;
  }
  .btn-edit-personality svg{width:13px;height:13px}
  .btn-edit-personality:hover{color:var(--ink-1);border-color:var(--accent)}

  /* ---- Add Account button + modal ---- */
  .btn-add-acct{
    display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
    font-size:.78rem;font-weight:700;border:1px solid rgba(25,103,255,.45);background:rgba(25,103,255,.12);
    color:var(--accent-hover);cursor:pointer;
    transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
    white-space:nowrap;
  }
  .btn-add-acct svg{width:14px;height:14px;flex:none}
  .btn-add-acct:hover{background:rgba(25,103,255,.22);border-color:var(--accent);color:var(--accent-ink)}

  .aa-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(2,4,9,.7);padding:20px}
  .aa-modal[hidden]{display:none}
  .aa-card{width:min(480px,100%);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.35);overflow:hidden;animation:lmAaIn .18s ease}
  @keyframes lmAaIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
  .aa-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border-soft);background:var(--surface-2)}
  .aa-head-icon{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--accent)}
  .aa-head-icon svg{width:18px;height:18px;color:var(--accent-ink)}
  .aa-head h3{margin:0;font-size:1.02rem;font-weight:600;font-family:var(--font-display);flex:1;color:var(--ink-1)}
  .aa-head p{margin:2px 0 0;font-size:.76rem;color:var(--ink-2)}
  .aa-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
  .aa-close svg{width:15px;height:15px}
  .aa-close:hover{color:var(--ink-1);border-color:var(--red);background:var(--red-dim)}
  .aa-body{padding:22px 20px 10px}
  .aa-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
  .aa-field label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
  /* textarea is styled with input, not after it: the personality field is a
     textarea and every other field in the same modal is an input, so listing
     them separately is how they drift apart. */
  .aa-field input,
  .aa-field textarea{background:var(--bg-1);border:1px solid var(--border);color:var(--ink-1);border-radius:10px;padding:11px 13px;font:inherit;font-size:.9rem;transition:border-color var(--dur-1) var(--ease)}
  .aa-field textarea{resize:vertical;min-height:76px;line-height:1.5;width:100%;display:block}
  .aa-field input:focus,
  .aa-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(25,103,255,.18)}
  .aa-field input::placeholder,
  .aa-field textarea::placeholder{color:var(--ink-3)}
  .aa-field .aa-hint{font-size:.72rem;color:var(--ink-3);display:flex;align-items:center;gap:5px}
  .aa-field .aa-hint svg{width:12px;height:12px;flex:none;opacity:.7}
  .aa-token-wrap{position:relative}
  .aa-token-wrap input{width:100%;padding-right:44px}
  .aa-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-3);cursor:pointer;padding:0;display:grid;place-items:center}
  .aa-eye svg{width:17px;height:17px}
  .aa-eye:hover{color:var(--ink-1)}
  .aa-status{display:none;align-items:center;gap:8px;margin:0 20px 14px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);font-size:.84rem;font-weight:600}
  .aa-status.show{display:flex}
  .aa-status.busy{color:var(--amber);border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.07)}
  .aa-status.ok{color:var(--green);border-color:rgba(52,211,153,.35);background:var(--green-dim)}
  .aa-status.err{color:var(--red);border-color:rgba(251,113,133,.35);background:var(--red-dim)}
  .aa-status .mini-spin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(251,191,36,.3);border-top-color:var(--amber);animation:spin .8s linear infinite;flex:none}
  .aa-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border-soft)}

  /* The Add Info FAB in this sub-tab needs the same "invisible until mounted"
     wrapper trick as Media Post's own #liAddInfoMount (cards.css), scoped to
     this sub-tab's own mount id so the two never collide. */
  #lmAddInfoMount{display:contents}
  #lmAddInfoMount:empty{display:none}

  @media (max-width:600px){
    .lm-acct-row{flex-direction:column;align-items:stretch}
    .acct-selector{justify-content:space-between}
  }