Quick links

Api
Api keys	Add
Api logs

Authentication and Authorization
Groups	Add
Users	Add

Celery Results
Group results	Add
Task results	Add

Clients
Lowe's Associates	Add

Common
Audio debug logs	Add
Audio files	Add
Call summary configs	Add
Call summary datas	Add
Call tag configs	Add
Call tag notification configs	Add
Call tag results
Config settingss	Add
Deepgram debug logs	Add
Filter presets	Add
Filterable Filter Configurations	Add
Filterable Items	Add
Notification triggers	Add
Notifications	Add
Prompt templates	Add
Slack notification logs	Add
Speed tests	Add
Transcript keywords	Add
Transcripts	Add
Voice Options	Add

Integration
Pages	Add
Providers	Add
Question historys	Add

Interview Management
Candidates	Add
Interview Categories	Add
Interview notes	Add
Interview steps	Add
Interviews	Add

Knowledge
Document Tags	Add
Document Versions	Add
Documents	Add

Live_Assist
Ask reddy annotations	Add
Ask reddy calls	Add
Transcript Feedbacks

Lms
Courses	Add
Lesson completions	Add
Lesson user time spents	Add
Lessons	Add
Modules	Add

Mainapp
Access tokens	Add
Audio file caches	Add
Auto generation statuss	Add
Call recordings	Add
Chat with transcript messages	Add
Chat with transcript sessions	Add
Company access requests	Add
Company prompt sets	Add
Companys	Add
Custom fields	Add
Embedding faqs	Add
End user products	Add
Export jobs
Faq results	Add
Feedbacks	Add
Gpt metrics	Add
Grade curves	Add
Grades	Add
Live conversation transcripts	Add
Live conversations	Add
Live ingestion controlss	Add
Live sim sessions	Add
Live sim states	Add
Objection scenarios	Add
Objections	Add
Outline sections	Add
Prompt historys	Add
Qa results	Add
Rag chats	Add
Reddy profiles	Add
Script trainings	Add
Suggested prompts	Add

Monitoring
Agent metrics	Add
Event durations	Add
Event metrics	Add

Periodic Tasks
Clocked	Add
Crontabs	Add
Intervals	Add
Periodic tasks	Add
Solar events	Add

Qa
Auto qa configs	Add
Benchmarks	Add
Condition nodes	Add
Data points	Add
External qa items	Add
Feedback messages	Add
Feedback threads	Add
Graph qas	Add
Internal qa items	Add
Live external qa item scores	Add
Live qa item scores	Add
Output nodes	Add
Pop up nodes	Add
Ports	Add
Progresss	Add
Qa automations	Add
Qa embeddings	Add
Qa relation snapshots	Add
Qa run iterations	Add
Qa runs	Add
Qa scoring instructions	Add
Report flags	Add
Training external qa item scores	Add
Training qa item scores	Add
Trigger nodes	Add

Reports
Download jobs	Add
Frequencies	Add
Report instances	Add
Report sections	Add
Reports	Add

Router
Agent call events	Add
Audiohook events	Add
Audiohook states	Add
Genesys agent states	Add
Genesys notification events	Add
Genesys queue to product mappings	Add

Sandbox
App Links	Add
Browser States	Add
CLI Commands	Add
CLI Issues	Add
CLI Sessions	Add
Sandbox Tasks	Add
Sandboxes	Add

Sessions
Sessions	Add

Systems
App keyframes	Add
App timeline frames	Add
Application pages	Add
Automation steps	Add
Custom apps	Add
Generic apps	Add
Grade links	Add
Html generations	Add
Os timeline annotations	Add
Os timeline apps	Add
Os timeline frames	Add
Os timelines	Add
Page links	Add
Screenshot to htmls	Add
Systems training attachments	Add
Systems training checkpoints	Add
Systems training recordings	Add
Systems trainings	Add

Taggit
Tags	Add

Ticket Management
Labels	Add
Tickets	Add

Training
Assignments	Add
Grading criterias	Add
Objection assignments	Add

Usage_Tracking
Llm calls	Add
Llm tags	Add
Stt calls	Add
Stt tags	Add
Tts calls	Add
Tts tags	Add

Wagtail documents
Documents	Add

Wagtail images
Images	Add

Change application page

ApplicationPage object (10)

History

Frozen

When frozen, this page cannot be edited

Locked

Html:

.full-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; 
    background-color: #f5f5f5;
  }

.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 45px; /* Increased from 41px */
    background-color: #ff7c24;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 11px; /* Increased from 10px */
  }

.sidebar-item {
    width: 100%;
    padding: 7px 0; /* Increased from 6px */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 4px 0; /* Increased from 3px */
  }
  .sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

.main-page {
    position: absolute;
    top: 0;
    left: 45px; /* Match new sidebar width */
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f5f5f5;
  }

.tab-menu {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 4px 7px; /* Increased from 3px 6px */
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;
  }
  .phone-call-tab {
    display: flex;
    align-items: center;
    gap: 6px; /* Increased from 5px */
    font-size: 11px; /* Increased from 10px */
    position: relative;
  }
  .tab-icon {
    width: 14px; /* Increased from 13px */
    height: 14px;
    margin-right: 4px;
  }
  .tab-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }
  .close-tab {
    margin-left: auto;
    padding: 1px 3px; /* Reduced from 2px 4px */
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 3px;
  }
  .close-tab:hover {
    border-color: #ddd;
    background-color: #f0f0f0;
  }
  .add-tab {
    margin-left: 6px; /* Reduced from 8px */
    padding: 3px 6px; /* Reduced from 4px 8px */
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
  }
  .add-tab:hover {
    background-color: #f0f0f0;
  }

.top-bar {
    flex-shrink: 0;
    height: 29px; /* Increased from 26px */
    background-color: #fff;
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    align-items: center;
    padding: 0 11px; /* Increased from 0 10px */
    gap: 11px; /* Increased from 10px */
  }
  .open-badge {
    background-color: #ff6900;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px; /* Reduced from 10px */
  }
  .top-icons {
    display: flex;
    align-items: center;
    gap: 18px; /* Reduced from 24px */
    margin-left: auto;
    padding-right: 10px; /* Reduced from 12px */
  }
  .top-icons svg {
    width: 14px; /* Increased from 13px */
    height: 14px;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.15s ease-in-out; /* Reduced from 0.2s */
  }
  .top-icons svg:hover {
    opacity: 1;
    transform: scale(1.08); /* Reduced from 1.1 */
  }
  .conversations-badge {
    background-color: #e1e1e1;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    color: #666;
    transition: all 0.15s ease-in-out; /* Reduced from 0.2s */
  }
  .conversations-badge:hover {
    background-color: #d1d1d1;
    transform: scale(1.08); /* Reduced from 1.1 */
  }
  .conversations-count {
    display: inline-block;
    background-color: #999;
    color: #fff;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    text-align: center;
    line-height: 11px;
    margin-left: 4px;
  }

.ticket-body {
    flex: 1; 
    display: flex;
    overflow: hidden; 
    gap: 13px;
    padding: 13px;
    background-color: #f8f9fa;
    min-height: 0;
  }
  .left-panel {
    width: 198px; /* Increased from 180px */
    background-color: white;
    border-radius: 3px;
    border: 1px solid #e1e1e1;
    flex-shrink: 0;
    overflow-y: auto;
  }
  .conversation-panel {
    flex: 1;
    background-color: white;
    border-radius: 3px;
    border: 1px solid #e1e1e1;
    padding: 11px; /* Increased from 10px */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-width: 0;
  }
  .right-panel {
    width: 246px; /* Increased from 224px */
    background-color: white;
    border-radius: 3px;
    border: 1px solid #e1e1e1;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 11px; /* Increased from 10px */

}

.bottom-menu-board {
    flex-shrink: 0;
    background-color: #fff;
    border-top: 1px solid #e1e1e1;
    padding: 10px; /* Reduced from 12px */
    display: flex;
    flex-direction: column;
    gap: 6px; /* Reduced from 8px */
  }

.menu-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

.macro-button {
    display: none;
    padding: 5px 8px; /* Reduced from 6px 10px */
    background-color: #e6f3ff;
    border: 1px solid #cce4ff;
    border-radius: 3px;
    font-size: 10px; /* Reduced from 10px */
    cursor: pointer;
    width: 33%;
    text-align: left;
    color: #333;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Reduced from 0 1px 3px rgba(0, 0, 0, 0.05) */
    position: relative;
    margin-left: 13px; /* Reduced from 16px */
  }

.macro-button .title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
  }

.macro-button .title {
    font-weight: 600;
    color: #333;
  }

.macro-button .subtitle {
    font-size: 8px; /* Reduced from 9px */
    color: #666;
    display: block;
  }

.macro-button svg {
    width: 11px; /* Reduced from 13px */
    height: 11px;
    fill: #7a7a7a;
  }

.macro-button:hover {
    background-color: #d9ecff;
  }

.form-group {
    padding: 10px;
    border-bottom: 1px solid #e1e1e1;
  }
  .form-group label {
    display: block;
    margin-bottom: 4px;
    color: #666;
    font-size: 10px;
  }
  .form-control {
    width: 100%;
    padding: 5px 6px; /* Increased from 4px 5px */
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px; /* Increased from 10px */
  }

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Reduced from 12px */
    padding-bottom: 6px; /* Reduced from 8px */
    border-bottom: 1px solid #e1e1e1;
  }
  .new-messages-divider {
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
    margin: 13px 0; /* Reduced from 16px 0 */
    position: relative;
  }
  .new-messages-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 0 6px; /* Reduced from 0 8px */
    color: #ff6900;
    font-size: 10px; /* Reduced from 10px */
  }
  .message {
    background-color: #fff8f3;
    padding: 11px; /* Increased from 10px */
    border-radius: 3px;
    margin-bottom: 11px; /* Increased from 10px */
    border-left: 3px solid #ff6900;
  }
  .message-header {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 10px;
  }
  .internal-badge {
    background-color: #ff6900;
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 8px;
  }
  .timestamp {
    color: #666;
    font-size: 10px;
    margin-left: 8px;
  }
  .message-content {
    font-size: 10px;
  }
  .note-container {
    background-color: #fff9e6;
    border: 1px solid #e6e6b8;
    border-radius: 3px;
    padding: 11px; /* Increased from 10px */
    margin-top: 13px; /* Reduced from 16px */
    display: flex;
    flex-direction: column;
    min-height: 211px; /* Increased from 192px */
    overflow: visible;
    resize: none;
  }
  .note-container.public-reply {
    background-color: white;
    border-color: #ddd;
  }
  .note-dropdown {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    font-size: 10px;
    margin-bottom: 12px; /* Reduced from 15px */
    width: auto;
    cursor: pointer;
    min-width: 76px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center; /* Reduced from 8px */
    background-size: 13px; /* Reduced from 16px */
    padding-right: 24px; /* Reduced from 30px */
  }
  .note-dropdown:hover {
    border-color: #999;
  }
  .note-dropdown:focus {
    outline: none;
    border-color: #666;
  }
  .note-dropdown option {
    padding: 6px 9px;
    background-color: white;
  }
  .note-field {
    width: 100%;
    min-height: 176px; /* Increased from 160px */
    padding: 8px;
    border: none;
    font-size: 11px; /* Increased from 10px */
    font-family: Arial, sans-serif;
    resize: vertical;
    background-color: transparent;
    color: #666;
    line-height: 1.3; /* Reduced from 1.5 */
    overflow: auto;
  }
  .note-field:focus {
    outline: none;
  }

.search-bar {
    position: relative;
    margin-bottom: 18px; /* Increased from 16px */
    display: flex;
    flex-direction: column;
  }
  .search-input-container {
    display: flex;
    gap: 5px; /* Increased from 4px */
  }
  .search-bar input {
    flex: 1;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 3px;
  }
  .search-bar button {
    padding: 4px 6px;
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  .search-bar button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
  }
  .error-message {
    color: #dc3545;
    font-size: 10px;
    margin-top: 4px;
    display: none;
    width: 100%;
  }
  .success-message {
    color: #0066cc;
    font-size: 10px;
    margin-top: 4px;
    display: none;
    width: 100%;
  }
  .search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Reduced from 8px */
    margin-top: 4px;
    z-index: 1000;
  }
  .courier-card {
    padding: 14px; /* Increased from 13px */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    position: relative;
  }
  .courier-icon {
    position: absolute;
    left: 13px;
    top: 13px;
    width: 17px; /* Increased from 15px */
    height: 17px;
  }
  .courier-name {
    font-size: 16px; /* Increased from 10px */
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 10px;
    padding-left: 25px; /* Increased from 23px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .courier-name-span {
font-size: 16px;
  }
  #courier-profile-btn {
    background-color: #ff7c24;
    color: white;
    border: none;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  #courier-profile-btn:hover {
    background-color: #2867f0;
  }
  .courier-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .detail-row {
    display: flex;
    font-size: 10px;
    line-height: 1.2; /* Reduced from 1.4 */
  }
  .detail-row .label {
    min-width: 70px;
    color: #1a1a1a;
    font-weight: 600;
    padding-right: 6px;
    flex-shrink: 0;
    line-height: 1.2;
  }
  .detail-row .value {
    flex: 1;
    color: #1a1a1a;
    padding-right: 16px; /* Reduced from 20px */
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .detail-row .value.multiline {
    white-space: normal;
  }
  .detail-row.wrap {
    align-items: flex-start;
  }
  .detail-row.wrap .label {
    white-space: normal;
    padding-right: 9px;
    max-width: 88px; /* Reduced from 110px */
  }
  .detail-row.wrap .value {
    padding-top: 1px;
  }
  .detail-row a {
    color: #0066cc;
    text-decoration: none;
  }
  .detail-row a:hover {
    text-decoration: underline;
  }

.menu-dropdown {
    padding: 6px 9px; /* Increased from 5px 8px */
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: white;
    font-size: 11px; /* Increased from 10px */
    cursor: pointer;
  }
  .menu-dropdown.left-aligned {
    width: 33%;
    margin-right: auto;
  }
  .menu-dropdown.right-aligned {
    margin-left: 0;
  }
  .menu-dropdown.right-aligned:last-child {
    margin-left: 4px;
    width: 128px; /* Reduced from 160px */
  }
  .menu-dropdown.inverted {
    background-color: #444;
    color: white;
    border-color: #444;
  }
  .menu-dropdown optgroup {
    font-size: 10px; /* Reduced from 10px */
    color: #666;
    padding: 3px 0; /* Reduced from 4px 0 */
  }
  .menu-dropdown option {
    font-size: 10px; /* Reduced from 10px */
    padding: 3px 5px; /* Reduced from 4px 6px */
  }
  .submit-button-group {
    position: relative;
    display: inline-flex;
    margin-left: 4px;
  }
  .submit-button {
    background-color: #444;
    color: white;
    border: none;
    padding: 6px 11px; /* Increased from 5px 10px */
    font-size: 11px; /* Increased from 10px */
    border-radius: 3px 0 0 3px;
    cursor: pointer;
  }
  .submit-button:hover {
    background-color: #333;
  }
  .dropdown-trigger {
    background-color: #444;
    color: white;
    border: none;
    padding: 6px 7px; /* Increased from 5px 6px */
    font-size: 9px; /* Increased from 8px */
    border-left: 1px solid #555;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    transition: transform 0.15s ease; /* Reduced from 0.2s */
  }
  .dropdown-trigger.open {
    transform: rotate(180deg);
  }
  .status-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1); /* Reduced from 4px */
    z-index: 1000;
    margin-bottom: 3px;
    min-width: 176px; /* Increased from 160px */
  }
  .dropdown-item {
    padding: 6px 11px; /* Increased from 5px 10px */
    cursor: pointer;
    font-size: 11px; /* Increased from 10px */
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dropdown-item:hover {
    background-color: #f5f5f5;
  }
  .status-square {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .status-square.open {
    background-color: #ff0000;
  }
  .status-square.pending {
    background-color: #2090fb;
  }
  .status-square.solved {
    background-color: #808080;
  }
  .icon-button {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
  }
  .icon-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .icon-button:active {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .five-9 {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-in-out;
  }
  .five-9:hover {
    transform: scale(1.08); /* Reduced from 1.1 */
  }
  .five-9:focus {
    outline: none;
  }
  .confirmation-buttons {
    display: flex;
    justify-content: center;
    gap: 9px; /* Increased from 8px */
    padding: 13px; /* Increased from 12px */
    border-top: 1px solid #e1e1e1;
    margin-top: 8px; /* Reduced from 10px */
  }
  .confirm-button {
    padding: 6px 13px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  .confirm-yes {
    background-color: #ff7c24;
  }
  .confirm-no {
    background-color: #666;
  }

.tags-input-container {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    background: white;
  }

.tags-input {
    border: none;
    outline: none;
    flex: 1;
    padding: 4px;
    font-size: 10px; /* Reduced from 13px */
    min-width: 96px; /* Reduced from 120px */
  }

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

.tag {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 1px 6px; /* Reduced from 2px 8px */
    font-size: 10px; /* Reduced from 12px */
    display: flex;
    align-items: center;
    gap: 4px;
  }

.tag-remove {
    cursor: pointer;
    color: #666;
    font-weight: bold;
  }

.tag-remove:hover {
    color: #333;
  }

.note-toolbar {
    display: none;
    position: absolute;
    height: 0;
    overflow: hidden;
    border-top: 1px solid #ddd;
    padding: 6px; /* Reduced from 8px */
    margin-top: 6px; /* Reduced from 8px */
    gap: 6px; /* Reduced from 8px */
    order: 2;
  }

.note-toolbar.visible {
    display: flex;
    position: relative;
    height: auto;
    overflow: visible;
    align-items: center;
  }

.toolbar-divider {
    width: 1px;
    height: 16px; /* Reduced from 20px */
    background-color: #ddd;
    margin: 0 3px; /* Reduced from 0 4px */
  }

.toolbar-button {
    padding: 3px; /* Reduced from 4px */
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    border-radius: 3px;
  }

.toolbar-button:hover {
    background-color: #f0f0f0;
  }

.toolbar-button.active {
    background-color: #e6e6e6;
  }

.recipient-bar {
    display: none;
    position: absolute;
    height: 0;
    overflow: hidden;
    align-items: center;
    gap: 6px; /* Reduced from 8px */
    margin: 6px 0; /* Reduced from 8px 0 */
    padding: 3px 0; /* Reduced from 4px 0 */
  }

.recipient-bar.visible {
    display: flex;
    position: relative;
    height: auto;
    overflow: visible;
  }
</style>

<div class="sidebar-item">
      <svg
        width="3.8mm" /* Further reduced from 4.8mm */
        height="3.8mm"
        viewBox="0 0 126.6946 151.83296"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(-34.352701,1.0835257)">
          <path
            style="fill:rgba(51, 51, 51);stroke:rgba(51, 51, 51);stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
            d="m 45.038615,61.970093 v 88.779347 h 35.429362 v -47.00498 h 34.464053 v 47.00498 h 35.42936 V 61.970093 Z"/>
          <path
            style="fill:rgba(51, 51, 51);stroke:rgba(51, 51, 51);stroke-width:7.15011;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
            d="M 157.47276,62.558165 97.405969,2.4913811 37.927255,61.970093 Z"/>
        </g>
      </svg>
    </div>

<div class="sidebar-item">
      <svg
        width="3.8mm" /* Further reduced from 4.8mm */
        height="3.8mm"
        viewBox="0 0 94.783463 120.39637"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(-12.187578,-134.23852)">
          <path
            style="fill:rgba(51, 51, 51, 0.8);stroke:rgba(51, 51, 51, 0.8);stroke-width:37.7953;stroke-linecap:round;stroke-linejoin:round"
            d="m 64.960938,526.25586 v 264.93945 h 34.3125 v -0.75 h 52.875002 v 44.47461 H 308.92188 V 794.1875 h 52.875 v 2.00977 h 23.60546 V 526.25586 Z m 30.84375,39.04102 H 359.39453 v 31.07617 52.41797 H 95.804688 v -52.41797 z m 0,98.28906 H 359.39453 v 83.49414 H 95.804688 Z m -30.84375,187.67773 v 92.23828 H 385.40234 v -87.23633 h -22.92382 v 38.72071 H 98.890625 v -43.72266 z"
            transform="scale(0.26458333)"/>
        </g>
      </svg>
    </div>

<div class="sidebar-item">
      <svg
        width="3.8mm" /* Further reduced from 4.8mm */
        height="3.8mm"
        viewBox="0 0 256 256"
        xmlns="http://www.w3.org/2000/svg">
        <path
          style="fill:rgba(51, 51, 51, 0.8)"
          d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z"/>
      </svg>
    </div>

<div class="sidebar-item">
      <svg
        width="3.8mm" /* Further reduced from 4.8mm */
        height="3.8mm"
        viewBox="0 0 256 256"
        xmlns="http://www.w3.org/2000/svg">
        <circle cx="128" cy="128" r="40" fill="none" stroke="rgba(51, 51, 51, 0.8)" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
        <path
          d="M41.43,178.09A99.14,99.14,0,0,1,31.36,153.8l16.78-21a81.59,81.59,0,0,1,0-9.64l-16.77-21a99.43,99.43,0,0,1,10.05-24.3l26.71-3a81,81,0,0,1,6.81-6.81l3-26.7A99.14,99.14,0,0,1,102.2,31.36l21,16.78a81.59,81.59,0,0,1,9.64,0l21-16.77a99.43,99.43,0,0,1,24.3,10.05l3,26.71a81,81,0,0,1,6.81,6.81l26.7,3a99.14,99.14,0,0,1,10.07,24.29l-16.78,21a81.59,81.59,0,0,1,0,9.64l16.77,21a99.43,99.43,0,0,1-10,24.3l-26.71,3a81,81,0,0,1-6.81,6.81l-3,26.7a99.14,99.14,0,0,1-24.29,10.07l-21-16.78a81.59,81.59,0,0,1-9.64,0l-21,16.77a99.43,99.43,0,0,1-24.3-10Z"
          fill="none"
          stroke="rgba(51, 51, 51, 0.8)"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"/>
      </svg>
    </div>

<div class="sidebar-item">
      <svg
        width="3.8mm" /* Further reduced from 4.8mm */
        height="3.8mm"
        viewBox="0 0 256 256"
        xmlns="http://www.w3.org/2000/svg">
        <path
          style="fill:rgba(51, 51, 51, 0.8)"
          d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"/>
      </svg>
    </div>

<div class="sidebar-item" style="margin-top: auto;">
      <svg
        width="3.8mm" /* Further reduced from 4.8mm */
        height="3.8mm"
        viewBox="0 0 256 256"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(0,31)">
          <path
            style="fill:rgba(51, 51, 51, 0.8)"
            d="M 118.24917,51.232611 V 194.0056 H 0 Z M 118.24917,0 c 0,32.644076 -26.480508,59.124586 -59.124584,59.124586 C 26.48051,59.124586 0,32.644076 0,0 Z m 19.50166,194.0056 c 0,-32.67668 26.4479,-59.12458 59.12458,-59.12458 32.67669,0 59.12459,26.48051 59.12459,59.12458 z m 0,-51.26522 V 0 H 256 Z"/>
        </g>
      </svg>
    </div>
  </div>

<div class="main-page">
    
    <div class="tab-menu">
      <div class="phone-call-tab">
        
        <svg
          width="4.8mm" /* Reduced from 5mm */
          height="4.8mm"
          viewBox="0 0 149.89873 127.57826"
          class="tab-icon"
          xmlns="http://www.w3.org/2000/svg">
          <g transform="translate(-27.506256,-41.427697)">
            <rect
              style="fill:rgba(51, 51, 51, 0.8);stroke:rgba(51, 51, 51, 0.8);stroke-width:1;stroke-linejoin:round"
              width="57.091709"
              height="114.18342"
              x="66.449493"
              y="25.601646"
              transform="rotate(15)"/>
            <rect
              style="fill:rgba(51, 51, 51, 0.8);stroke:rgba(51, 51, 51, 0.8);stroke-width:1;stroke-linejoin:round"
              width="57.091705"
              height="56.843281"
              x="73.997269"
              y="137.43445"
              transform="rotate(-15)"/>
          </g>
        </svg>
        <div class="tab-text">
          <span>Phone Call from {{phone_number}}</span>
          <span>#284324473</span>
        </div>
        <span class="close-tab">X</span>
      </div>
      <span class="add-tab">+ Add</span>
    </div>

<div class="top-bar">
      <div class="phone-call-tab">
        <span>14154973</span>
      </div>
      <div class="phone-call-tab">
        <span>Anonymous User</span>
      </div>
      <div class="phone-call-tab">
        <span class="open-badge">OPEN</span>
        <span>Ticket #284324473</span>
      </div>
      <div class="top-icons">
        
        <svg data-tooltip="Search"
          width="4.8mm" /* Reduced from 6mm */
          height="4.8mm"
          viewBox="0 0 256 256"
          xmlns="http://www.w3.org/2000/svg">
          <path 
            style="fill:none;stroke:rgba(51, 51, 51, 0.8);stroke-width:16;stroke-linecap:round;stroke-linejoin:round" 
            d="M116,28A88,88,0,1,0,116,204,88,88,0,1,0,116,28Zm112,200-48.3-48.3"/>
        </svg>
        
        <div class="conversations-badge" data-tooltip="Active conversations">
          Conversations <span class="conversations-count">0</span>
        </div>
        
        <svg data-tooltip="Messages"
          width="4.8mm" /* Reduced from 6mm */
          height="4.8mm"
          viewBox="0 0 256 256"
          xmlns="http://www.w3.org/2000/svg">
          <path
            style="fill:rgba(51, 51, 51, 0.8)"
            d="M216,48H40A16,16,0,0,0,24,64V224a15.84,15.84,0,0,0,9.25,14.5A16.05,16.05,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78.69.69,0,0,0,.13-.11L82.5,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,176H82.5a16,16,0,0,0-10.3,3.75l-.12.11L40,208V64H216Z"/>
        </svg>
        
        <svg data-tooltip="Notifications"
          width="4.8mm" /* Reduced from 6mm */
          height="4.8mm"
          viewBox="0 0 256 256"
          xmlns="http://www.w3.org/2000/svg">
          <path
            style="fill:rgba(51, 51, 51, 0.8)"
            d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216ZM48,184c7.7-13.24,16-43.92,16-80a64,64,0,1,1,128,0c0,36.05,8.28,66.73,16,80Z"/>
        </svg>
        
        <svg data-tooltip="Menu"
          width="4.8mm" /* Reduced from 6.2mm */
          height="4.8mm"
          viewBox="0 0 47.386421 45.618137"
          xmlns="http://www.w3.org/2000/svg">
          <g transform="translate(-81.30679,-125.69093)">
            <g transform="translate(4.7181346,92.530197)">
              <g transform="translate(-24.331877,-0.93115064)">
                <rect
                  style="fill:#2090fb;fill-opacity:1;"
                  width="39.69342"
                  height="39.69342"
                  x="100.92053"
                  y="40.016602" />
                <text
                  style="font-weight:bold;font-size:31.75px;fill:#ffffff;"
                  x="105.29076"
                  y="71.28138"
                  transform="scale(0.99741291,1.0025938)">M</text>
                <circle
                  style="fill:#fb3738;fill-opacity:1;"
                  cx="139.53008"
                  cy="42.868763"
                  r="8.7768774" />
              </g>
            </g>
          </g>
        </svg>
        
        <svg data-tooltip="Alerts"
          width="4.8mm" /* Reduced from 6mm */
          height="4.8mm"
          viewBox="0 0 256 256"
          xmlns="http://www.w3.org/2000/svg">
          <path
            style="fill:rgba(51, 51, 51, 0.8)"
            d="M221.8,175.94C216.25,166.38,208,139.33,208,104a80,80,0,1,0-160,0c0,35.34-8.26,62.38-13.81,71.94A16,16,0,0,0,48,200H88.81a40,40,0,0,0,78.38,0H208a16,16,0,0,0,13.8-24.06ZM128,216a24,24,0,0,1-22.62-16h45.24A24,24,0,0,1,128,216Z"/>
        </svg>
        
        <button class="five-9" id="five-9-button" data-tooltip="Five9">
          <svg
            width="4.8mm" /* Reduced from 6mm */
            height="4.8mm"
            viewBox="0 0 272.35087 356.80951"
            xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(-56.546693,-35.581204)">
              <g transform="matrix(2.1894547,0,0,2.0080718,-69.02664,-34.330507)">
                <path
                  style="fill:none;stroke:rgba(51, 51, 51, 0.8);stroke-width:20;stroke-linejoin:round"
                  d="m 142.00985,110.86343 a 37.387497,37.387497 0 0 1 -37.3875,37.38749 37.387497,37.387497 0 0 1 -37.387494,-37.38749 37.387497,37.387497 0 0 1 37.387494,-37.387501 37.387497,37.387497 0 0 1 37.3875,37.387501 z"/>
                <path
                  style="fill:none;stroke:rgba(51, 51, 51, 0.8);stroke-width:20;stroke-linejoin:round"
                  transform="rotate(-90)"
                  d="m -47.69664,87.528649 a 65.519165,65.519165 0 0 1 -22.74141,70.711281 65.519165,65.519165 0 0 1 -74.16878,4.03098"/>
                <path
                  style="fill:rgba(51, 51, 51, 0.8);stroke:rgba(51, 51, 51, 0.8);stroke-width:20;"
                  d="M 142.56729,116.22824 101.83215,208.4125 Z"/>
              </g>
            </g>
          </svg>
        </button>
        
        <svg data-tooltip="Apps"
          width="4.8mm" /* Reduced from 6mm */
          height="4.8mm"
          viewBox="0 0 113.84335 113.72311"
          xmlns="http://www.w3.org/2000/svg">
          <g transform="translate(-47.141155,-35.150608)">
            <rect
              style="fill:none;stroke:rgba(51, 51, 51, 0.8);stroke-width:10;stroke-linejoin:round"
              width="45.93697"
              height="45.93697"
              x="110.04753"
              y="40.150608" />
            <rect
              style="fill:none;stroke:rgba(51, 51, 51, 0.8);stroke-width:10;stroke-linejoin:round"
              width="45.93697"
              height="45.93697"
              x="52.175137"
              y="40.345146" />
            <rect
              style="fill:none;stroke:rgba(51, 51, 51, 0.8);stroke-width:10;stroke-linejoin:round"
              width="45.93697"
              height="45.93697"
              x="109.75829"
              y="97.936752" />
            <rect
              style="fill:none;stroke:rgba(51, 51, 51, 0.8);stroke-width:10;stroke-linejoin:round"
              width="45.93697"
              height="45.93697"
              x="52.141155"
              y="97.75235" />
          </g>
        </svg>
      </div>
    </div>

<div class="ticket-body">
      
      <div class="left-panel">
        <div class="form-group">
          <label>Brand</label>
          <select class="form-control">
            <option>Grubhub</option>
            <option disabled>Seamless</option>
          </select>
        </div>
        <div class="form-group">
          <label>Requester</label>
          <select class="form-control">
            <option>Anonymous User</option>
            <option></option>
          </select>
        </div>
        <div class="form-group">

<label>Assignee</label>
          <select class="form-control">
            <option>Driver Care /......</option>
          </select>
        </div>
        <div class="form-group">
          <label>Followers</label>
          <select class="form-control">
            <option> </option>
          </select>
        </div>
        <div class="form-group">
          <label>Sharing</label>
          <select class="form-control">
            <option>-</option>
          </select>
        </div>
        <div class="form-group">
          <label>Form</label>
          <select class="form-control">
            <option>Driver Care Ticket Form</option>
            <option>Customer Care Ticket Form</option>
            <option>Restaurant Care Ticket Form</option>
            <option>Corporate Care Ticket Form</option>
            <option>Linked Notification Form</option>
            <option>Customer Experience Ticket Form</option>
            <option>Wasabi Submission Ticket Form</option>
            <option>Order Flaw Ticket Form</option>
            <option>Driver Info Ticket Form</option>
            <option>Fraud Ticket Form</option>
            <option>ROps Ticket Form</option>
          </select>
        </div>
        <div class="form-group">
          <label>Tags</label>
          <div class="tags-input-container">
            <div class="tags-list"></div>
            <input class="tags-input" type="text" placeholder="type & press Enter to add tag">
          </div>
        </div>

<div class="form-group">
          <label>Priority</label>
          <select style="width: 50%;" class="form-control">
            <option>-</option>
            <option>Low</option>
            <option>Normal</option>
            <option>High</option>
            <option>Urgent</option>
          </select>
        </div>

<div class="form-group" style="display: flex; align-items: center; gap: 8px;">
          <input type="checkbox" id="safety-issue" style="margin: 0;">
          <label for="safety-issue" style="margin: 0;">Safety Issue</label>
        </div>

<div class="form-group">
          <label>Ticket Source</label>
          <select disabled class="form-control">
            <option>-</option>
            <option>Phone</option>
            <option>Email</option>
            <option>Chat</option>
            <option>Web Form</option>
            <option>API</option>
          </select>
        </div>
        
        <div class="form-group">
          <label>DCare Primary Contact Reason*</label>
          <select id="pcr" name="pcr" class="form-control">
            <option>-</option>
            <option>Live Order Issues</option>
            <option>Courier App Issues</option>
            <option>Courier Inquiry</option>
            <option>Courier Accounting</option>

<option>Miscellaneous</option>
            <option>General Feedback</option>          
          </select>
        </div>
        <div class="form-group">
          <label>Courier Inquiry Secondary Contact Reason*</label>
          <select id="scr" name="scr" class="form-control">
            <option>-</option>
            <option>Offer Commitment Rate Dispute</option>
            <option>Account Vioaltion</option>
            <option>Covid 19 Subsidy Questions/Status</option>
            <option>Courier Incentive Program Concerns</option>
            <option>General Payment Inquiry</option>
            <option>Healthcare Subsidy Questions/Status</option>
            <option>Instant Cash Out Inquiry</option>
            <option>Market Inquiry</option>
            <option>Grubhub Courier Card</option>
          </select>
        </div>
        <div class="form-group">
          <label>Order Number</label>
          <input disabled type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Dollar Amount</label>
          <input type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Restaurant Name</label>
          <input disabled type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Restaurant ID</label>

<input disabled type="text" class="form-control">
        </div>
        <div class="form-group">
          <label>Diner ID</label>

<div class="conversation-panel">
        <div class="conversation-header" style="display: flex; flex-direction: column; align-items: flex-start;">
          <div>Phone Call from {{phone_number}} (Anonymous User)</div>
          <div style="color: #666; font-size: 10px;">13h | Via API</div>
        </div>
        <div class="new-messages-divider">
          <span class="new-messages-text">New messages</span>
        </div>
        <div class="message">
          <div class="message-header">
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#424242" viewBox="0 0 256 256"><path d="M172,120a44,44,0,1,1-44-44A44.05,44.05,0,0,1,172,120Zm60,8A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88.09,88.09,0,0,0-91.47-87.93C77.43,41.89,39.87,81.12,40,128.25a87.65,87.65,0,0,0,22.24,58.16A79.71,79.71,0,0,1,84,165.1a4,4,0,0,1,4.83.32,59.83,59.83,0,0,0,78.28,0,4,4,0,0,1,4.83-.32,79.71,79.71,0,0,1,21.79,21.31A87.62,87.62,0,0,0,216,128Z"></path></svg>
            </div>
            <span>Grubhub Care</span>
            <span class="internal-badge">Internal</span>
            <a href="#" style="color: #0066cc; margin-left: 10px;">Assign</a>
            <span class="timestamp">less than a minute ago</span>
          </div>
          <div class="message-content">
            Identify the contact
          </div>
        </div>
        <div class="note-container">
          <select id="note-type-dropdown" name="note-type-dropdown" class="note-dropdown">
            <option>Public reply</option>
            <option selected>Internal note</option>
          </select>
          
          <div class="recipient-bar">
            <span style="color: #666; font-size: 10px;">To: {{courier_name}} </span>
          </div>
          
          <textarea class="note-field"
            name="note-field"
            id="note-field"
            placeholder="Enter message..."
>**Inbound**
Who did you speak with? (list all names if you spoke with multiple contacts)
Reason for contact?
Did the courier report multiple issues?
What actions did we take?
What was the provided resolution?
Ticket numbers related
Guide page used
Feedback about Grubhub?
**Outbound Call**(Remember outbound call disclosure)
Who did you speak with?
What actions did we take?
Was a voicemail left?</textarea>

<div class="right-panel" id="phone-search-panel">
        <div style="margin-bottom: 16px; text-align: center;">
          <img src="https://about.grubhub.com/wp-content/uploads/2022/03/Grubhub-Logo.png"
               alt="Grubhub Logo"
               style="max-width: 176px; height: auto;">
        </div>
        <div style="margin-bottom: 16px;">
          <label>Search category:</label>
          <select class="form-control">
            <option>by Driver Phone</option>
          </select>
        </div>
        <div class="search-bar" id="phone-search-bar">
          <div class="search-input-container">
            <input immediate
              type="text"
              id="phone-search"
              placeholder="Enter 10-digit phone number"
              pattern="[0-9]*"
              maxlength="10"
              inputmode="numeric"
              name="phone-search"
              oninput="this.value = this.value.replace(/[^0-9]/g, '')"
              title="Please enter a 10-digit phone number">
            <button id="search-button" disabled>🔍</button>
          </div>
          <span class="error-message">Please enter a valid 10-digit phone number</span>
          <span class="success-message">Click the search button to the right ➜</span>
          <div id="search-results" class="search-results" style="display: none;">
            <div id="courier-card" class="courier-card">
              <div class="courier-icon">
                <svg width="24px" height="24px" viewBox="0 0 24 24">
                  <path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9 1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
                        fill="#1a1a1a"/>
                </svg>
              </div>
              <div class="courier-content">
                <div class="courier-name">
                  <span class="courier-name-span" id="courier-name">{{courier_name}}</span>
                </div>

<div class="detail-row">
                    <span class="label">Status:</span>
                    <span class="value">{{courier_status}}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">Level:</span>
                    <span class="value">{{courier_level}}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">Phone Number:</span>
                    <span class="value">{{phone_number}}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">Phone Type:</span>
                    <span class="value">IphoneAppStore</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">Email:</span>
                    <span class="value">{{courier_name}}@email.com</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">Driver schedule:</span>
                    <span class="value"><a href="#" style="color: #0066cc;">View schedule</a></span>
                  </div>
                  <div class="detail-row wrap">
                    <span class="label">Large Order:</span>
                    <span class="value">No</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">ID:</span>
                    <span class="value">{{courier_ID}}</span>
                  </div>
                  <div class="detail-row">
                    <span class="label">Vehicle Type:</span>
                    <span class="value">{{vehicle_type}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="confirmation-buttons">
              <button id="confirm-button" class="confirm-button confirm-yes">Yes, it's correct</button>
              <button id="confirm-no" class="confirm-button confirm-no">No, it's incorrect</button>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="bottom-menu-board">
      <button class="macro-button" id="region-transfer-button" style="display: none;">
        <span class="title">Region Transfer Complete</span>
        <span class="subtitle">Courier Concierge > Couriers > Changing my delivery region</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="11px" height="11px" fill="#7a7a7a" viewBox="0 0 256 256"><path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128a133.33,133.33,0,0,1,48.07-97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path></svg>
      </button>
      <button class="macro-button" id="under-14-days-button" style="display: none;">
        <span class="title">Under 14 Days</span>
        <span class="subtitle">Courier Concierge > Couriers > Changing my delivery region > Transfer Unavailable</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="11px" height="11px" fill="#7a7a7a" viewBox="0 0 256 256"><path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128a133.33,133.33,0,0,1,48.07-97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path></svg>
      </button>
      <div class="menu-controls">
        <svg xmlns="http://www.w3.org/2000/svg" width="13px" height="13px" fill="#000000" viewBox="0 0 256 256"><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></svg>
        <select id="macro-dropdown" name="macro-dropdown" class="menu-dropdown left-aligned">
          <option value="" selected>Apply macro</option>
          <optgroup label="Suggested for this ticket">
            <option>Phone Notes Template (DCare)</option>
            <option>Phone Notes Template (Ticket Template)</option>
            <option>Region Transfer Complete</option>
            <option>Under 14 Days</option>
          </optgroup>
          <optgroup label="Your most used">
            <option>Phone Notes Template (DCare)</option>
            <option>Transfer to Alorica Courier Partners</option>
            <option>Region Transfer Complete</option>
            <option>Under 14 Days</option>
          </optgroup>
        </select>
        <select class="menu-dropdown right-aligned">
          <option>Close tab</option>
          <option>Stay on ticket</option>
        </select>
        <div class="submit-button-group">
          <button class="submit-button" id="submit-button">Submit as <b>Open</b></button>
          <button id="dropdown-trigger" class="dropdown-trigger">▼</button>
          <div class="status-dropdown">
            <div class="dropdown-item">
              <div class="status-square open"></div>
              <span>Submit as <b>Open</b></span>
            </div>
            <div class="dropdown-item">
              <div class="status-square pending"></div>
              <span>Submit as <b>Pending</b></span>
            </div>
            <div class="dropdown-item">
              <div class="status-square solved"></div>
              <span>Submit as <b>Solved</b></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

// 2) PHONE SEARCH LOGIC
        const searchInput = root.querySelector('#phone-search');
        const searchButton = root.querySelector('#search-button');
        const searchResults = root.querySelector('#search-results');
        const errorMsg = root.querySelector('.error-message');
        const successMsg = root.querySelector('.success-message');
        let errorTimeout;

function validatePhoneNumber(phone) {
            return phone === '{{phone_number}}';
        }

if (searchInput) {
            searchInput.addEventListener('input', function() {
                clearTimeout(errorTimeout);
                if (errorMsg) errorMsg.style.display = 'none';
                if (successMsg) successMsg.style.display = 'none';
                searchInput.style.borderColor = '#ddd';

// Strip non-digits and limit to 10
                this.value = this.value.replace(/[^0-9]/g, '');
                if (this.value.length > 10) {
                    this.value = this.value.slice(0, 10);
                }

// Toggle button disabled
                if (searchButton) {
                    searchButton.disabled = !validatePhoneNumber(this.value);
                }

// Show relevant messages
                if (this.value.length === 10) {
                    if (validatePhoneNumber(this.value)) {
                        if (successMsg) successMsg.style.display = 'block';
                    } else {
                        if (errorMsg) {
                            errorMsg.textContent = "Please input the customer's phone number.";
                            errorMsg.style.display = 'block';
                        }
                        searchInput.style.borderColor = '#dc3545';
                    }
                } else if (this.value.length > 0 && this.value.length < 10) {
                    errorTimeout = setTimeout(() => {
                        if (errorMsg) {
                            errorMsg.textContent = "Please enter a valid 10-digit phone number";
                            errorMsg.style.display = 'block';
                        }
                        searchInput.style.borderColor = '#dc3545';
                    }, 800);
                }
            });
        }

if (searchButton) {
            searchButton.addEventListener('click', () => {
                if (!searchInput) return;
                const value = searchInput.value;
                if (validatePhoneNumber(value)) {
                    if (searchResults) searchResults.style.display = 'block';
                    if (errorMsg) errorMsg.style.display = 'none';
                    if (successMsg) successMsg.style.display = 'none';
                    searchInput.style.borderColor = '#ddd';
                } else {
                    if (searchResults) searchResults.style.display = 'none';
                    if (errorMsg) errorMsg.style.display = 'block';
                    if (successMsg) successMsg.style.display = 'none';
                    searchInput.style.borderColor = '#dc3545';
                }
            });
        }

if (searchInput) {
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && searchButton) {
                    searchButton.click();
                }
            });
        }

// 3) STATUS / SUBMIT-BUTTON DROPDOWN LOGIC
        const dropdownTrigger = root.querySelector('#dropdown-trigger');
        const statusDropdown = root.querySelector('.status-dropdown');
        const submitButton = root.querySelector('#submit-button');
        const dropdownItems = root.querySelectorAll('.dropdown-item');

if (dropdownTrigger && statusDropdown) {
            dropdownTrigger.addEventListener('click', function(e) {
                e.stopPropagation();
                const isOpen = (statusDropdown.style.display === 'block');
                statusDropdown.style.display = isOpen ? 'none' : 'block';
                dropdownTrigger.classList.toggle('open', !isOpen);
            });
        }

dropdownItems.forEach(item => {
            item.addEventListener('click', function() {
                const textContent = this.textContent.trim();
                if (submitButton) {
                    submitButton.textContent = textContent;
                }
                if (statusDropdown) {
                    statusDropdown.style.display = 'none';
                }
                if (dropdownTrigger) {
                    dropdownTrigger.classList.remove('open');
                }
            });
        });

// Click outside to close
        document.addEventListener('click', function(e) {
            if (
                statusDropdown &&
                dropdownTrigger &&
                statusDropdown.style.display === 'block' &&
                !statusDropdown.contains(e.target) &&
                e.target !== dropdownTrigger
            ) {
                statusDropdown.style.display = 'none';
                dropdownTrigger.classList.remove('open');
            }
        });

// 4) CONFIRM BUTTON LOGIC
        const confirmButton = root.querySelector('#confirm-button');
        if (confirmButton) {
            confirmButton.addEventListener('click', () => {
                // Ensure search results stay visible first
                if (searchResults) searchResults.style.display = 'block';
                
                // Then handle the driver profile window
                const driverProfileWinbox = winboxes.find(wb => wb.id === 'winbox-76');
                if (driverProfileWinbox) {
                    driverProfileWinbox.restore();
                    driverProfileWinbox.focus();
                    driverProfileWinbox.show();
                }
            });
        }

const confirmNo = root.querySelector('#confirm-no');
        if (confirmNo) {
            confirmNo.addEventListener('click', () => {
                if (searchResults) searchResults.style.display = 'none';
            });
        }

// 5) FIVE9 BUTTON LOGIC
        const five9Button = root.querySelector('#five-9-button');
        if (five9Button) {
            five9Button.addEventListener('click', () => {
                const five9Winbox = winboxes.find(wb => wb.id === 'winbox-79');
                if (five9Winbox) {
                    five9Winbox.show();
                    five9Winbox.focus();
                }
            });
        }

// 6) OPTIONAL: POSITION WINBOXES
        setTimeout(() => {
            // Position the main Zendesk window
            const zendeskWinbox = winboxes.find(wb => wb.id === 'winbox-{{ page.app.id }}');
            if (zendeskWinbox) {
                zendeskWinbox.width = 905;
                zendeskWinbox.height = 675;
                zendeskWinbox.resize();
                zendeskWinbox.focus();
                // Add this line to rename the winbox
                zendeskWinbox.setTitle('Zendesk');
            }

/*// Position the Five9 window
            const five9Winbox = winboxes.find(wb => wb.id === 'winbox-79');
            if (five9Winbox) {
                five9Winbox.x = 30;
                five9Winbox.y = 50;
                five9Winbox.move();
            }

// Cascade other windows
            const otherWindows = winboxes.filter(wb =>
                !wb.min &&
                !wb.hidden &&
                wb.id !== 'winbox-{{ page.app.id }}' &&
                wb.id !== 'winbox-79'
            );
            otherWindows.forEach((wb, index) => {
                wb.x = 100 + (20 * index);
                wb.y = 100 + (20 * index);
                wb.move();
            });*/
        }, 300);

}, 500); // Wait 500ms after DOM is ready
})();

setTimeout(() => {
  const root = queryShadowRoot('{{ page.app_id }}', '#full-page');
  const tagsContainer = root.querySelector('.tags-input-container');
  const tagsList = root.querySelector('.tags-list');
  const tagsInput = root.querySelector('.tags-input');

// Initialize with Market Inquiry tag
  addTag('Market Inquiry');

if (tagsInput) {
    tagsInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && e.target.value.trim()) {
        e.preventDefault();
        addTag(e.target.value.trim());
        e.target.value = '';
      }
    });
  }
}, 500);

setTimeout(() => {
  const root = queryShadowRoot('{{ page.app_id }}', '#full-page');
  const noteDropdown = root.querySelector('.note-dropdown');
  const noteToolbar = root.querySelector('.note-toolbar');
  const noteField = root.querySelector('.note-field');
  const noteContainer = root.querySelector('.note-container');
  const recipientBar = root.querySelector('.recipient-bar');

if (noteDropdown) {
    noteDropdown.addEventListener('change', function() {
      if (this.value === 'Public reply') {
        noteToolbar.classList.add('visible');
        recipientBar.classList.add('visible');
        noteContainer.classList.add('public-reply');
        noteField.value = '';
      } else {
        noteToolbar.classList.remove('visible');
        recipientBar.classList.remove('visible');
        noteContainer.classList.remove('public-reply');
        if (this.value === 'Internal note') {
          noteField.value = `**Inbound**
Who did you speak with? (list all names if you spoke with multiple contacts)
Reason for contact?
Did the courier report multiple issues?
What actions did we take?
What was the provided resolution?
Ticket numbers related
Guide page used
Feedback about Grubhub?
**Outbound Call**(Remember outbound call disclosure)`;
        }
      }
    });
  }
}, 500);

setTimeout(() => {
  const root = queryShadowRoot('{{ page.app_id }}', '#full-page');
  const macroDropdown = root.querySelector('.menu-dropdown.left-aligned');
  const regionTransferButton = root.querySelector('#region-transfer-button');
  const under14DaysButton = root.querySelector('#under-14-days-button');
  const noteDropdown = root.querySelector('.note-dropdown');
  const noteField = root.querySelector('.note-field');

if (macroDropdown) {
    macroDropdown.addEventListener('change', function() {
      // Hide all macro buttons first
      regionTransferButton.style.display = 'none';
      under14DaysButton.style.display = 'none';

// Show the selected macro button
      if (this.value === 'Region Transfer Complete') {
        regionTransferButton.style.display = 'flex';
      } else if (this.value === 'Under 14 Days') {
        under14DaysButton.style.display = 'flex';
      }
    });
  }

// Add click handler for the region transfer button (existing)
  if (regionTransferButton) {
    regionTransferButton.addEventListener('click', function() {
      if (noteField) {
        if (noteDropdown) {
          noteDropdown.value = 'Public reply';
          const event = new Event('change');
          noteDropdown.dispatchEvent(event);
        }
        noteField.value = `Your region transfer is complete! Upon your next login, you will be able to see the new area in your app under 'Delivery Region'. You may start scheduling and taking orders in your new delivery region right away!

There may be some differences between your old market and your new one. Below are a few links to the Driver FAQ page to help you review these points:

• Block release time & date
• Driver Payment Terms
• Delivery Region Boundaries

Thank you and have a great day!
- Team Grubhub

For more information about partnering with Grubhub, click here to check out our 150+ Driver help articles.`;

regionTransferButton.style.display = 'none';
        if (macroDropdown) {
          macroDropdown.value = '';
        }
      }
    });
  }

// Add click handler for the under 14 days button
  if (under14DaysButton) {
    under14DaysButton.addEventListener('click', function() {
      if (noteField) {
        if (noteDropdown) {
          noteDropdown.value = 'Public reply';
          const event = new Event('change');
          noteDropdown.dispatchEvent(event);
        }
        noteField.value = `Hello {{first_name}},

Thank you for reaching out to Grubhub.

At this time, we are unable to complete your market transfer request. Please check back with us after you have been in your market for 14 days.

Thank you and have a great day!

- Grubhub

For more information about partnering with Grubhub, click here to check out our 150+ Driver help articles.`;

under14DaysButton.style.display = 'none';
        if (macroDropdown) {
          macroDropdown.value = '';
        }
      }
    });
  }
}, 500);
</script>

Name:

App:

Grubhub Zendesk (4)

Grade Links/Prompts - {systems_history} is available as a template variable (lowercase even though this shows as uppercase 🤪)

	Element id	Generic app	Delete?

Page links

	Swap delay	To page	Element id	Generic app	Delete?
		-		-

Delete

Django administration

Change application page

ApplicationPage object (10)

Grade Links/Prompts - {systems_history} is available as a template variable (lowercase even though this shows as uppercase 🤪)

Page links